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

· 3 min read
How to Show an Local Image till the NetworkImage() Loads Up in flutter
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?

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 GuideFlutter ProjectsCode 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.

Leave a Reply