Check image is loaded in Image.network widget in flutter

You may use the loadingBuilder which is inbuilt feature from flutter for Image.Network

I did it as below:

Image.network(imageURL,fit: BoxFit.cover,  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,      ),    );  },),

for this kind of issues it's good to use the cached_network_imageso you can provide a placeholder when the image is loading and an error widget in case a resource fails to load

String url = "http://via.placeholder.com/350x150";CachedNetworkImage(       imageUrl: url,       placeholder: (context,url) => CircularProgressIndicator(),       errorWidget: (context,url,error) => new Icon(Icons.error),     ),

for ones who do not need to cache the image can use meet_network_image package,

The package basic usage :

                MeetNetworkImage(                  imageUrl:                      "https://random.dog/3f62f2c1-e0cb-4077-8cd9-1ca76bfe98d5.jpg",                  loadingBuilder: (context) => Center(                        child: CircularProgressIndicator(),                      ),                  errorBuilder: (context, e) => Center(                        child: Text('Error appear!'),                      ),                )

In addition, you can do that by yourself with using a FutureBuilder,

We need to get data with http call that way, we need to import http before import you also need to add pubspec.yaml and run the command flutter packages get

import 'package:http/http.dart' as http;

  FutureBuilder(    // Paste your image URL inside the htt.get method as a parameter    future: http.get(        "https://random.dog/3f62f2c1-e0cb-4077-8cd9-1ca76bfe98d5.jpg"),    builder: (BuildContext context, AsyncSnapshot<http.Response> snapshot) {      switch (snapshot.connectionState) {        case ConnectionState.none:          return Text('Press button to start.');        case ConnectionState.active:        case ConnectionState.waiting:          return CircularProgressIndicator();        case ConnectionState.done:          if (snapshot.hasError)            return Text('Error: ${snapshot.error}');          // when we get the data from the http call, we give the bodyBytes to Image.memory for showing the image          return Image.memory(snapshot.data.bodyBytes);      }      return null; // unreachable    },  );