How to Enable Image Cache and Lazy Loading in Flutter

In this example, we are going to show you the easiest way to enable caching and lazy loading of image in Flutter App. Caching and lazy loading is great feature to reduce internet bandwidth transfer and faster app loading. See the example for more details.

First, you need to add cached_network_image Flutter package in your project by adding following lines in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.1.0

Cached_network_image both caching and lazy loading while scrolling on your app. The images under the view will not get loaded untill it comes to screen view on scroll.

Import package to your script:

import 'package:cached_network_image/cached_network_image.dart';

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

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

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:Text("Caching and Lazy Loading Images"),
              backgroundColor: Colors.redAccent,
          ),
          body: Container( 
                  padding: EdgeInsets.all(20),
                  child:Column(
                    children: <Widget>[
                       CachedNetworkImage(
                            imageUrl: "https://www.fluttercampus.com/img/logo_small.webp",
                            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("assets/noimage.jpg"),
                            //show no iamge availalbe image on error laoding
                          ),
                      
                    ]
              )
          )
      );
  }
}