How to Implement Progress Indicator in Flutter - 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(...),
);