RangeError (index): Invalid value: Valid value range is empty: 0 Before getting Data?-CodePudding

am try to display the images in a CarouselSlider.builder. Here is the code

return Container(
      color: Constants.secondaryColor,
      child: CarouselSlider.builder(
        itemCount: items.length,
        itemBuilder: _listViewItemBuilder,
        options: CarouselOptions(
          height: MediaQuery.of(context).size.height / 4,
          aspectRatio: 16 / 9,
          viewportFraction: 1.0,
          initialPage: 0,
          enableInfiniteScroll: true,
          reverse: false,
          autoPlay: false,
          autoPlayInterval: Duration(seconds: 4),
          autoPlayAnimationDuration: Duration(milliseconds: 800),
          autoPlayCurve: Curves.fastOutSlowIn,
          enlargeCenterPage: true,
          scrollDirection: Axis.horizontal,
        ),
      ),
    );



Widget _listViewItemBuilder(
      BuildContext context, int index, int pageViewIndex) {
    var bannerImgs = items[index];
      return Container(
        child: _itemImg(bannerImgs),
      ); 
  }

  Widget _itemImg(Album img) {
    return Center(
      child: FadeInImage.assetNetwork(
          placeholder: 'images/loader.gif', image: img.image!),
    );
  }

Before Loading first image it was showing error:

RangeError (index): Invalid value: Valid value range is empty: 0

After that it was displaying fine. Can any one help from this?

CodePudding user response：

Use FutureBuilder. When the data is loading show a CircularProgressIndicator and when the data is loaded show your CarouselSlider.builder .

Example Code:

FutureBuilder<List<Album>>(
    future: fetchApi, // async work
    builder: (BuildContext context, AsyncSnapshot<List<Album>> snapshot) {
       switch (snapshot.connectionState) {
         case ConnectionState.waiting: return CircularProgressIndicator();
         default:
           if (snapshot.hasError)
              return Text('Error: ${snapshot.error}');
           else
          return Container(
      color: Constants.secondaryColor,
      child: CarouselSlider.builder(
        itemCount: items.length,
        itemBuilder: _listViewItemBuilder,
        options: CarouselOptions(
          height: MediaQuery.of(context).size.height / 4,
          aspectRatio: 16 / 9,
          viewportFraction: 1.0,
          initialPage: 0,
          enableInfiniteScroll: true,
          reverse: false,
          autoPlay: false,
          autoPlayInterval: Duration(seconds: 4),
          autoPlayAnimationDuration: Duration(milliseconds: 800),
          autoPlayCurve: Curves.fastOutSlowIn,
          enlargeCenterPage: true,
          scrollDirection: Axis.horizontal,
        ),
      ),
    );
        }
      },
    )

CodePudding user response：

return items.length > 0?  Container(
      color: Constants.secondaryColor,
      child: CarouselSlider.builder(
        itemCount: items.length,
        itemBuilder: _listViewItemBuilder,
        options: CarouselOptions(
          height: MediaQuery.of(context).size.height / 4,
          aspectRatio: 16 / 9,
          viewportFraction: 1.0,
          initialPage: 0,
          enableInfiniteScroll: true,
          reverse: false,
          autoPlay: false,
          autoPlayInterval: Duration(seconds: 4),
          autoPlayAnimationDuration: Duration(milliseconds: 800),
          autoPlayCurve: Curves.fastOutSlowIn,
          enlargeCenterPage: true,
          scrollDirection: Axis.horizontal,
        ),
      ),
    ) : CircularProgressIndicator()

In your

initState(){
Future.delayed(const Duration(milliseconds: 1500), () {

  setState(() {
  
  });

});
}