Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Enable Cache and Lazy Loading Image in Flutter App

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';

Loading Image from Network and Save caching with placeholder:

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

Loading Image with Progress:

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

Full Code Example:

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
                          ),
                      
                    ]
              )
          )
      );
  }
}

Output Screenshot:

Loading Placeholder while loading image: Error Loading Placeholder: Loaded Image

In this way, you can enable cache and lazy loading image in your flutter app.

No any Comments on this Article


Please Wait...