Flutter Cache Network Image and Lazy Loading With Image Placeholder

CachedNetworkImage shows a network image using a caching mechanism. It also provides support for a placeholder, showing an error and fading into the loaded image.  Next to that it supports most features of a default Image widget.

This could also work as solution for saving bandwith. And a lot of time android emulator does not load large image from network. It may keep showing connection closed. The solution could be using network image using caching mechanism. So there is where this plugin shines.

We will use a plugin called

cached_network_image

Get the complete code for this

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
  runApp(
      MaterialApp(
        home: MyApp(),
      )
  );
}

class MyApp extends StatefulWidget{
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title:const Text("Caching and Lazy Loading Images"),
          backgroundColor: Colors.redAccent,
        ),
        body: Container(
            padding: const EdgeInsets.all(20),
            child:Column(
                children: <Widget>[
                  CachedNetworkImage(
                    imageUrl: "http://mvs.bslmeiyu.com/storage/profile/2022-05-02-626fc39bf18a6.png",
                    imageBuilder: (context, imageProvider) => Container(
                      width: 400,
                      height: 200,
                      decoration: BoxDecoration(
                        image: DecorationImage( //image size fill
                          image: imageProvider,
                          fit: BoxFit.fitWidth,
                        ),
                      ),
                    ),
                    placeholder: (context, url) => Container(
                      alignment: Alignment.center,
                      child: CircularProgressIndicator(), // you can add pre loader iamge as well to show loading.
                    ), //show progress  while loading image
                    errorWidget: (context, url, error) => Image.asset("images/flutter.png"),
                    //show no image available image on error loading
                  ),
                 //show progress  while loading image

                ]
            )
        )
    );
  }
}

You may replace the placeholder child with an image from the assets folder or using CircularProgressIndicator()

You can play some of the properties or fileds of this plugin.

If you don't want to use cached_network_image, there is an alternative to this. This is called FadeInImage widget.