Flutter Cached Network Image

Kardo Tinambunan
2 min readNov 18, 2021

Cached network image is a flutter library that serves to display images and will be stored in the cache. This library is very functional when we load (display) images from the internet so that when we upload an image for the first time, the image will be stored in the cache so that in the future the application does not need to load images continuously because the image will be displayed from the cache.

For the cached network image feature itself, it has several features that are quite complete, for example, error handling (when the image is empty) and animation.

For the next step I will explain how to implement it in the project that we will create.

Keep in mind, I’ve used Flutter here which is null safety however, if you haven’t used the latest version of Flutter, you can adjust it.

first time install package flutter cached network image here

then open your project file, in the pubspec.yaml file, install the package.

cached_network_image: ^3.1.0

then type the command flutter pub get in your project terminal or save the pubspec.yaml file

then, don’t forget to add the cached network image library to your work page.

import ‘package:cached_network_image/cached_network_image.dart’;

In the cached network image we can also control the image , if the image to be displayed is not available, or is damaged or we can also display the default image if the image loaded is not available. For more details see the sample below.

or if you don’t want to display the image by default, you can change it to text, for example:

errorWidget:(context, url, error) => Text(“image not found”),

that’s our discussion this time about cached network images, if there are problems you can write them in the comments column. if this topic helps, you can follow me or give appreciation .

--

--

Kardo Tinambunan

hay saya seorang fullstak developer di salah satu kantor di siolo