In My Flutter Application while Fetching products from firebase showing RangeError (index): Invalid value: Valid value range is empty: 0

Question

This is my code when I run this code it shows me error valid range is empty:0 At the output screen, some images are working properly but when I click on some images it shows me the error valid range is empty:0

import 'package:flutter_ecommerce/provider/product.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'featured_card.dart';

class FeaturedProducts extends StatefulWidget {
  @override
  _FeaturedProductsState createState() => _FeaturedProductsState();
}

class _FeaturedProductsState extends State<FeaturedProducts> {
  @override
  Widget build(BuildContext context) {
    final productProvider = Provider.of<ProductProvider>(context);

    return Container(
        height: 230,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: productProvider.products.length,
            itemBuilder: (_, index) {
              return FeaturedCard(
                product: productProvider.products[index],
              );
            }));
  }
}

Please help me in this error

Answer 1

You should check if productProvider.products.length == 0 show a loader or everything you want otherwise show the ListView widget.

import 'package:flutter_ecommerce/provider/product.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'featured_card.dart';

class FeaturedProducts extends StatefulWidget {
  @override
  _FeaturedProductsState createState() => _FeaturedProductsState();
}

class _FeaturedProductsState extends State<FeaturedProducts> {
  @override
  Widget build(BuildContext context) {
    final productProvider = Provider.of<ProductProvider>(context);

    return Container(
        height: 230,
        child: productProvider.products.length == 0 
            ?
            Center(child: CircularProgressIndicator()) 
            :
            ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: productProvider.products.length,
            itemBuilder: (_, index) {
              return FeaturedCard(
                product: productProvider.products[index],
              );
            }
       )
     );
  }
}