How to Show an Local Image till the NetworkImage() Loads Up in flutter?

When the user performs some action on a screen the compiler will fetch data from the backend and will display data to the user. While fetching data sometimes we need to display a local image till the NetworkImage() Loads Up so in this article we will learn about How to Show a Local Image till the NetworkImage() Loads Up in flutter?

Discover how to gracefully handle image loading in Flutter by showing a local placeholder image until the NetworkImage() finishes loading. In this informative blog post, explore techniques and code snippets that enable you to display a temporary local image while waiting for the network image to load. Enhance user experience, reduce perceived loading time, and ensure a seamless visual transition between placeholder and final image. Whether you’re building an image-heavy app or working with slow network connections, this tutorial will guide you step-by-step through the process of implementing this efficient and user-friendly approach. Elevate your Flutter app’s image loading experience today by mastering the art of displaying a local image while the NetworkImage() loads.

Know How to Show a Local Image till the NetworkImage() Loads Up in flutter?

Use a Stateful Widget and you can add a listener to the ImageStream and override the initState() to trigger a replacement between the local image and the one obtained from the internet when it is fully loaded.

Code Snippet will look like the below:

 var _loadImage = new AssetImage(
      'assets/img/basic2-090_loader_loading-512.png');
  var _myEarth = new NetworkImage(
      "http://qige87.com/data/out/73/wp-image-144183272.png");
  bool _checkLoaded = true;

  @override
  void initState() {
    _myEarth.resolve(new ImageConfiguration()).addListener((_, __) {
      if (mounted) {
        setState(() {
          _checkLoaded = false;
        });
      }
    });
  }


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(child: new Container(
          decoration: new BoxDecoration(shape: BoxShape.circle,),
          height: 80.0,
          width: 80.0,
          child: new CircleAvatar(
            backgroundColor: Theme
                .of(context)
                .scaffoldBackgroundColor,
            backgroundImage: _checkLoaded ? _loadImage : _myEarth,
          ),)
        )
    );
  }
}

You can try with a package named flutter_url_image_load_fail to define the loading and failed to load widgets:

LoadImageFromUrl(
    'https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png', //Image URL to load
    (image) => image, //What widget returns when the image is loaded successfully
    () => Text('Loading...'), //What widget returns when the image is loading
    (IRetryLoadImage retryLoadImage, code , message){ //What widget returns when the image failed to load
        return RaisedButton(
            child: Text('Try Again'),
            onPressed: (){
                retryLoadImage.retryLoadImage(); //Call this method to retry load the image when it failed to load
            },
        );
    },
    requestTimeout: Duration(seconds: 5) //Optionally set the timeout
)

Two way to solve your problem

1) Using Image. network : If you want to show progressbar, simmer, or any other widget when image loading.

Image.network(
    "URL",
    fit: BoxFit.cover,
    loadingBuilder: (BuildContext ctx, Widget child, ImageChunkEvent loadingProgress) {
      if (loadingProgress == null) {
        return child;
      }else {
        return Center(
          child: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
          ),
        );
      }
    },       
)

2) Using FadeInImage : If you want to display your local image when network image loading.

FadeInImage.assetNetwork( 
   image:"URL",
   placeholder:"assets/loading.png" // your assets image path
   fit: BoxFit.cover,
 )

Conclusion:

Thanks for being with us on a Flutter Journey !!!

Do let us know if you need any assistance with Flutter Development?

We would love to assist you with the same.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.