Show progress indicator while loading image in Flutter

Images are a vital aspect of mobile app design and user experience. They play a central role in creating a visually appealing and engaging environment, attracting users, and encouraging them to interact with the app. In Flutter apps, these images can be assets or network images. When we load network image, It takes some time to load in Flutter app. So for better user experience we should display a thumbnail or progress indicator until the image is loaded and displayed to user. In this article we will demonstrate that how to show progress indicator while image is loading.

To show image in flutter we will use Image.netwrok widget like this.

Image.network(
  'https://static-00.iconduck.com/assets.00/flutter-icon-2048x2048-ufx4idi8.png',
  loadingBuilder: (context, child, progress) {
    if (progress == null) {
      return child;
    } else {
      return CircularProgressIndicator();
    }
  },
)

Here we just display a network image using Image.network widget. We have passed two parameters in network constructor. First one is url of image which we have to load and display. And second one is loadingBuilder, This is a callback function with three parameters.

context: The build context, which provides information about the widget’s location in the widget tree.

child: The image widget (child) that will be displayed once the image is loaded successfully.

progress: A double value indicating the progress of image loading. It will be null if the image has already loaded or if there’s no progress information available.

When we run this code, we will see the progress indicator until the image is load and displayed.