Random Firebase Background Image and Caching

0

I have been working on an app that uses a full screen background image that's different everyday. I download this random large image (2048x2732 - about 5MB size) from Firebase Storage and use the cached_network_image dart package to cache the image.

I wondering if this is the best approach and if anyone has a better path.

I think my goal is to have a one-size fits all background image (if thats possible) thats from Firebase all while not trying to have an extremely high daily download quota reached everyday in Firebase. Any help is greatly appreciated.

  import 'package:flutter/material.dart';
  import 'package:firebase_storage/firebase_storage.dart';
  import 'package:cached_network_image/cached_network_image.dart';
  import 'package:flutter_spinkit/flutter_spinkit.dart';
  import 'dart:math';

  class _HomePage extends State<HomePage> with WidgetsBindingObserver {
      var _imgResult;
      Random rndImg;

  @override
  void initState(){
      super.initState();
           getRandomImage().then((imageNumber){
             //GET IMAGE FROM FIREBASE
             _getImageUrl(imageNumber);
           });

  }
       Future<String> getRandomImage() async{
        int min = 1;
        int max = 21 + 1;
        rndImg = new Random();
        var rimg = min + rndImg.nextInt(max - min);
        String imageNumber = rimg.toString();
        return imageNumber;
    }

  Widget build(BuildContext context) {
          return LayoutBuilder(builder: (context, boxConstraints) {
            return Stack(
              children: <Widget>[
                new Container(
                  height: double.infinity,
                  width: double.infinity,
                  child: CachedNetworkImage(
                    placeholder: (context, url)  {
                      return Center(
                        child: SpinKitDualRing(color: Colors.black)
                        );
                      },
                    imageUrl: _imgResult,
                    imageBuilder: (context, imageProvider) => Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                            image: imageProvider,
                            fit: BoxFit.cover,
                            colorFilter:
                            ColorFilter.mode(Colors.black.withOpacity(0.7), BlendMode.dstATop)),
                      ),
                    ),
                    errorWidget: (context, url, error) => Icon(Icons.error),
                  ),
                ),
                Scaffold(
                  backgroundColor: Colors.transparent,
                  appBar: new AppBar(
                    backgroundColor: Colors.transparent,
                    elevation: 0.0,
                    centerTitle: true,
                  ),
                  body: Container(
                      padding: EdgeInsets.only(
                          left: 20.0, right: 20.0, top: 0.0, bottom: 0.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          new Padding(
                            padding: EdgeInsets.only(left: 0.0, right: 0.0, top: 0.0, bottom: 25.0),
                           child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                new Text('Welcome',
                                    style: TextStyle(color: Color(0xffffffff), fontSize: verseTextSize)),
                              ],
                            ),
                          ),

                          new Expanded(
                              flex: 1,
                            child: new SingleChildScrollView(
                              child: new Column(
                                children: <Widget>[
                                  new Row(
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      crossAxisAlignment: CrossAxisAlignment.center,
                                      children: <Widget>[
                                        new Flexible(
                                          child: new Padding(
                                            padding: EdgeInsets.fromLTRB(
                                                10.0, verseTopPadding, 10.0, 10.0),
                                            child: new Container(
                                              child: new Text( "Here is a title",
                                                  style: TextStyle(fontSize: verseTextSize, color: Colors.white)),
                                            ),
                                          ),
                                        ),
                                      ]
                                  ),
                                  new Row(
                                    children: <Widget>[
                                      new Flexible(
                                        child: new Padding(
                                          padding: const EdgeInsets.fromLTRB(
                                              0.0, 10.0, 20.0, 10.0),
                                          child: new Row(
                                            mainAxisAlignment: MainAxisAlignment.end,
                                            children: [
                                              new Text("Here is a description", style: TextStyle(
                                                  fontSize: verseTextSize, color: Colors.white)),
                                            ],
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),

                                ]
                              )
                            )
                           ),
                        ],
                      )
                  ),
                )
              ],
            );
          });
  }

    Future _getImageUrl(String imageNumber) async {
      //GETTING NEW PHOTO FROM FIREBASE
      print('DEV: Getting new photo from FIREBASE');
      print('$imageNumber.png');
      final ref = FirebaseStorage.instance.ref().child('$imageNumber.png');
      backImgUrl = await ref.getDownloadURL();


    setState(() {
      _imgResult = backImgUrl;
      });
    }

  } 
flutter
dart
asked on Stack Overflow Aug 21, 2019 by kelsheikh

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0