Flutter Show Progress Indicator While Loading Network Image

Loading indicator works as place holder while we load data over internet. Same functionality works on a Image. While we load a image from network then it would take few seconds to load. Until image is completely loaded there will be a blank white space shows on our application screen. This is very less interactive to app use because he did not know what is happing on the empty screen. So we will display a progress indicator on the image area until image is loaded.

Live Screenshot:

Flutter Show Progress Indicator While Loading Network Image

1. Defining a final string variable and pass our image URL.

final String imageURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

2. Defining Image.network() widget. We are using frameBuilder and loadingBuilder properties of Image. Until image progress data is not equals to Null then the CircularProgressIndicator() will be display instead of image. When image is loaded from internet progress data will be equals to NULL then it will display the Image and hide the CircularProgressIndicator().

Image.network(imageURL, width: 300, height: 200, fit: BoxFit.fitWidth,
              frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
        return child;
      }, loadingBuilder: (context, child, progress) {
        if (progress != null) {
          return const Center(
            child: CircularProgressIndicator(),
          );
        } else {
          return child;
        }
      }),

Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  final String imageURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
      child:
          Image.network(imageURL, width: 300, height: 200, fit: BoxFit.fitWidth,
              frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
        return child;
      }, loadingBuilder: (context, child, progress) {
        if (progress != null) {
          return const Center(
            child: CircularProgressIndicator(),
          );
        } else {
          return child;
        }
      }),
    ))));
  }
}