In App, it is often necessary to pull images from the background, which on the one hand will bring network bandwidth consumption to the server, and on the other hand, the waiting process of loading images will also affect user experience. Therefore, images are often cached on the App side to avoid repeated requests for the same image. In Flutter, cached_image_network provides the function of caching network images and provides rich loading instructions.

To add more features to the lists, pull-down refresh and pull-up loading. We used lists that had images downloaded from the Internet. Download images directly from Flutter’s Image.network because they cannot be cached and the experience is not good enough. Those familiar with iOS will no doubt know SDWebImage, the most widely used open source image caching component in Objective-C. Similar to SDWebImage, the cached_image_network plugin for Flutter does this. Cached_image_network is simple to use, starting with adding a dependency to pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter

  #... Rely on other
  cached_network_image: ^ 3.0.0
Copy the code

We’ll then introduce the source code where we need to use cached_image_network:

import 'package:cached_network_image/cached_network_image.dart';
Copy the code

Finally, use cached_image_network instead of loading images (such as Image.network) where network images need to be loaded:

CachedNetworkImage(imageUrl: "http://via.placeholder.com/350x150"),
Copy the code

These are the simplest uses of cached_image_network, although for the better user experience it is recommended to use a placeholder map or load indicator to indicate that an image is loading.

Use a placeholder map

CachedNetworkImage provides a placeholder map and error indication after a load failure for static indication. We prepare image-default. PNG and image-failed. PNG files respectively to represent the default placeholder and the placeholder after loading failure. Then use the placeholder map with the placeholder and errorWidget of the CachedNetworkImage constructor, as shown below:

Widget _imageWrapper(String imageUrl) {
    return SizedBox(
      width: 150,
      height: ITEM_HEIGHT,
      child: CachedNetworkImage(
        imageUrl: imageUrl,
        placeholder: (context, url) => Image.asset('images/image-default.png'),
        errorWidget: (context, url, error) =>
           Image.asset('images/image-failed.png'),),); }}Copy the code

Use progress loading instructions

Load progress can also be indicated using a progress load indicator, which supports both prototype and linear progress. This will more commonly used for a larger preview, the code as shown below, including LinearProgressIndicator is linear indicators, CircularProgressIndicator is circular indicator:

Widget _imageWrapper(String imageUrl) {
    return SizedBox(
      width: 150,
      height: ITEM_HEIGHT,
      child: CachedNetworkImage(
        imageUrl: imageUrl,
        progressIndicatorBuilder: (context, url, downloadProgress) =>
            LinearProgressIndicator(value: downloadProgress.progress),
        errorWidget: (context, url, error) =>
            Image.asset('images/image-failed.png'),),); }Copy the code

The effect

After a drop-down refresh, you can see the placeholder map first, and then gradually transition to a successfully loaded image. If you modify the link to an invalid link or one where the resource does not exist, a placeholder map that failed to load the image is displayed. This experience is much better than Image.net Work, which is blank with no instructions.