CODEWITHSUNDEEP
firebaseflutterdartgoogle-cloud-firestore
Mat Koffman
Mat Koffman

Reputation: 607

How to remove loading time between images from firebase in carousel slider in flutter

I am viewing images from firebase in a carousel slider in flutter. But there is a small loading gap everytime I swipe to the next image.

Is it possible to save the images in some way to remove the loading time between the images?

Here is my code:

class ViewImages extends StatelessWidget {
  
  Future getCarouselWidget() async {
        var firestore = Firestore.instance;
        QuerySnapshot qn = await firestore.collection("images").getDocuments();
        return qn.documents;
      }

  @override
  Widget build(BuildContext context) {
    var idx = 1;
    return Container(
      child: FutureBuilder(
          future: getCarouselWidget(),
          builder: (context, AsyncSnapshot snapshot) {
            List<NetworkImage> list = new List<NetworkImage>();
            if (snapshot.connectionState == ConnectionState.waiting) {
              return new CircularProgressIndicator(); 
            } else {
              if (snapshot.hasError) {
                return new Text("fetch error");
              } else {

                //Create for loop and store the urls in the list 
                for(int i = 0; i < snapshot.data[0].data.length; i++ ) {
                  debugPrint("Index is " + idx.toString());
                  list.add(NetworkImage(snapshot.data[0].data["img_"+idx.toString()]));
                  idx++;
                }
                return new Container(
          height: MediaQuery.of(context).size.width,
          width: MediaQuery.of(context).size.width,
                    child: new Carousel(
                      boxFit: BoxFit.cover,
                      images: list,
                      autoplay: false,
                      autoplayDuration: Duration(seconds: 5),
                      dotSize: 4.0,
                      indicatorBgPadding: 16.0,
                      animationCurve: Curves.fastOutSlowIn,
                      animationDuration: Duration(milliseconds: 2000),
            dotIncreasedColor: Colors.white,
            dotColor: Colors.grey,
            dotBgColor: Colors.transparent,
            
                    ));
              }
            }
          }),
    );
  }}

Upvotes: 0

Views: 889

Answers (1)

sameer kashyap
sameer kashyap

Reputation: 1166

What you are looking for is CachedNetworkImage, CachedNetworkImage, as the name suggests will only fetch the image once and the cache it, so the next time you build the widget, It won't be called again.

Upvotes: 2

Related Questions