Better way to load images from network flutter

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

       Image.network(
                  widget.networkUrl,
                  fit: BoxFit.fill,
                  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,
                      ),
                    );
                  },
                ),

I would recommend you to use https://pub.dartlang.org/packages/cached_network_image

It's really works good for my cases.

Simple code example from their r

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

or

Image(image: CachedNetworkImageProvider(url))

You should add to the pubspec file

cached_network_image: <actual version here>

into the dependencies section

You can also use FadeInImage https://flutter.dev/docs/cookbook/images/fading-in-images

FadeInImage.assetNetwork(
        placeholder: 'assets/loading.gif',
        image: 'https://picsum.photos/250?image=9',
      ),

If you want a circular shape for your image. You can use Circle Avatar in such a way that it will act as loader and displayer both....

Parent circle avatar will be having loader and If we put transparent color to child circle avatar it will show loading until it is loaded...

Plus point with this way is you can simply give border also by setting background color of parent circle avatar and increasing it's radius slightly.

CircleAvatar(
                backgroundColor: Colors.red,
                radius: 65,
                backgroundImage: AssetImage('assets/bottombar/loading.gif'),
                child: CircleAvatar(
                  radius: 65,
                  backgroundColor: Colors.transparent,
                  backgroundImage: NetworkImage(_url),
                ),
              ),