How to Implement Progress Indicator in Flutter

Question

I am trying to implement a Progress Indicator in Flutter but I am not sure whether I need to put in the if condition to show Progress Indicator while the item is still Loading.

class HomePageNewArrival extends StatefulWidget {
  final List<Product> productList;

  HomePageNewArrival({this.productList});

  @override
  _HomePageNewArrivalState createState() => _HomePageNewArrivalState();
}

class _HomePageNewArrivalState extends State<HomePageNewArrival> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 550,
      child: GridView.builder(
          physics: NeverScrollableScrollPhysics(),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 2 / 3.2,
            crossAxisSpacing: 1,
            mainAxisSpacing: 1,
          ),
          itemCount: this.widget.productList.length,
          itemBuilder: (context, index) {
            if (index.) {
              return HomenewArrivalProducts(this.widget.productList[index]);
            } else {
              return new CircularProgressIndicator();
            }
          }),
    );
  }
}

Answer 1

Building widgets in flutter is instant i think what you wanna do is to show a circular spinner while images are loading in HomenewArrivalProducts() Widget if you have a Image.network() try this:

child: Image.network(
      'https://example.com/image.jpg',
      loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
        if (loadingProgress == null)
          return child;
        return Center(
          child: CircularProgressIndicator(
            value: loadingProgress.expectedTotalBytes != null
                ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
                : null,
          ),
        );
      },
    ),

and if you wanna just to make an illusion of something is loading you can use FutureBuilder()

FutureBuilder(
      future: Future.delayed(Duration(milliseconds: 500)),
      builder: (ctx, snapshot) =>
          snapshot.connectionState == ConnectionState.waiting
              ? CircularProgressIndicator()
              : GridView.builder(...),
    );