Flutter Cache Network Image and Lazy Loading With Image Placeholder

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


    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() {
            home: MyApp(),
    class MyApp extends StatefulWidget{
      _MyAppState createState() => _MyAppState();
    class _MyAppState extends State<MyApp> {
      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),
                    children: <Widget>[
                        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


    Recommended posts

    Recent posts