How to resolve it "RangeError (index): Invalid value : Valid value range is empty : 0" in flutter?

Question

I'm to trying to get images from firestore database and put onto String type list and want to show as the slider Image. but the above error is occurring on Screen but after milliseconds, error goes and images show as slider

Decleared Global Varible:

 List<String> getSliderImages=[];

Method for fetched images from firestore:

And this method is calling inside initState() method

 void getSliderImage(){
   List<String> userId=[];
    Firestore.instance.collection("Slider").getDocuments()
    .then((QuerySnapshot snapshot) {
      snapshot.documents.forEach((f){
        setState(() {
         userId.add(f.documentID);  
        });
      });


      for(int i=0;i<userId.length;i++){
        setState(() {
         print('snap.documentID_IF_userId :${userId[i]}');
         Firestore.instance.collection('Slider').document(userId[i]).get().then((DocumentSnapshot document){
          String image=document['Image'];
          getSliderImages.add(image); 
          print('snap.documentID_IF_userId_IMAGE :$image');
          print("getSliderImages:$getSliderImages");
         });
        });
      } 
    }).catchError((onError){
      print(onError); 
      setState(() {
      Fluttertoast.showToast(msg: "$onError"); 
      });
    });
  }

Slider widget, there I want to display images:

Here I used carousel_pro plugin for Slider

Container(
                padding: const EdgeInsets.all(10.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(30.0)),
                //color: Colors.black
              ),
              height: MediaQuery.of(context).size.height/5,
              width: MediaQuery.of(context).size.height/2,
              child: Carousel(
                images: [
                   new NetworkImage(getSliderImages[0]),
                   new NetworkImage(getSliderImages[1]),
                   new NetworkImage(getSliderImages[2]),
                   new NetworkImage(getSliderImages[3]),

                  ],//getSliderUserId
                showIndicator: true,
                borderRadius: true,

                moveIndicatorFromBottom: 100.0,
               noRadiusForIndicator: false,
                overlayShadow: false,
               overlayShadowColors: Colors.white,
                overlayShadowSize: 0.7,
             )
            ),

Answer 1

I have solved it by myself, this error was occurring because of getSliderUserId[] was empty at initially. so, I put a condition on the widget. if getSliderImages.isEmpty then show progress indicator otherwise Display Slider Image.

Now it's working perfectly without getting indexing error :)

Here Modified code:

Container(
                padding: const EdgeInsets.all(10.0),
                decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(30.0)),
                //color: Colors.black
              ),
              height: MediaQuery.of(context).size.height/5,
              width: MediaQuery.of(context).size.height/2,
              child:  getSliderImages.isEmpty? 
              CircularProgressIndicator()
               :
              Carousel(
                images: [
                   new NetworkImage(getSliderImages[0]),
                   new NetworkImage(getSliderImages[1]),
                   new NetworkImage(getSliderImages[2]),
                   new NetworkImage(getSliderImages[3]),
                  ],
               showIndicator: true,
               borderRadius: true,
               moveIndicatorFromBottom: 100.0,
               noRadiusForIndicator: false,
               overlayShadow: false,
               overlayShadowColors: Colors.transparent,
               overlayShadowSize: 0.7,
             )
            ),