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

Question

            new CircleAvatar(
                              backgroundColor: Colors.black87,
                              backgroundImage: new NetworkImage(url),
                              radius: 45.0,
                            )

I Want to show a local image in CircleAvatar until the NetworkImage fully loads from the internet.

Mcfarland

Answer 1

You may want to try a FadeInImage wrapped in a ClipOval. FadeInImage provides a placeholder property you can use while the network image is loading.

Note: ClipOval can be expensive if you do it a lot, so use it sparingly.

Wormseed

how can I use placeholder for "NetworkImage" until "NetworkImage" is loaded? any example will be highly appreciated. Thanks – Grogan

Answer 2

There is a new official widget for this now!

First, create a folder called assets in the project root directory.

Then, mention the folder in pubspec.yaml file (also found in the project root directory):

flutter:
  uses-material-design: true
  assets:
    - assets/

You can put a picture there, for example, put this as ./assets/loading.gif.

(If you changed files in assets folder, hot reload won't work. Make sure you restart the app entirely.)

Now you can refer to the loading file in the code:

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: 'https://github.com/flutter/website/blob/master/src/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

For more details: https://flutter.io/docs/cookbook/images/fading-in-images#from-asset-bundle

Cerotype

FadeInImage cannot be passed as the image to the CircleAvatar – Protege

My widget needs 'imageProvider'. Kindly suggest how can I use your FadeInImage and network image solutions to show image? Thanks. – Grogan

I am using photo_view package available at pub.dev/packages/photo_view. My code is as: PhotoView( imageProvider: NetworkImage( widget.photoPath.toString(), ),), Kindly suggest how can I use placeholder image until network image is loaded. Thanks a lot. – Grogan

Answer 3

Use a StateflWidget 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.

I have used a high resolution image to show the loading time:

  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,
          ),)
        )
    );
  }
}

Leavetaking

BoxDecoration do not have width and height property – Yesman

this is on the Container widget not BoxDecoration – Leavetaking

This solved my problem, the key thing I needed to know when the image was loaded. – Hinze

how can I show "CircularProgressIndicator" instead of backgroundImage _loadImage. Kindly suggest. Thanks – Grogan

Answer 4

You can also use the frameBuilder property. The good thing: you can implement your custom placeholder widget here.

Image.network('https://example.com/my-image',
  height: 100,
  frameBuilder: (context, child, frame, _) {
    if (frame == null) {
      // fallback to placeholder
      return MyPlaceholderWidget();
    }
    return child;
  }
)

Bonniebonns

Answer 5

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,
  )

Southwestward

My widget needs 'imageProvider'. Kindly suggest how can I use your solutions? Thanks. – Grogan

I am using photo_view package available at pub.dev/packages/photo_view. My code is as: PhotoView( imageProvider: NetworkImage( widget.photoPath.toString(), ),), Kindly suggest how can I use placeholder image until network image is loaded. Thanks a lot. – Grogan

Answer 6

While large images load, show a fallback asset!

 new PlutoImage.networkWithPlaceholder("http://68.media.tumblr.com/f7e2e01128ca8eb2b9436aa3eb2a0a33/tumblr_ogwlnpSpcU1sikc68o1_1280.png", new Image.asset("assets/placeholder.png"));

https://github.com/FaisalAbid/pluto

Mcfarland

Answer 7

You can Use FadeInImage.

Use a placeholder from asset

FadeInImage.assetNetwork(
                              placeholder: "assets/images/image1.png",
                              image:"URL"
                                ),

Use a placeholder from memory

FadeInImage.memoryNetwork(
                                      placeholder: localImageBytes,
                                      image:"URL"
                                    ),

Fiddlestick

I am using photo_view package available at pub.dev/packages/photo_view. My code is as: PhotoView( imageProvider: NetworkImage( widget.photoPath.toString(), ),), Kindly suggest how can I use placeholder image until network image is loaded. Thanks a lot. – Grogan

@Grogan Please create a new question – Fiddlestick

Thanks Abir, I have solved the issue, another stackoverflow user shared the best solution to fix this issue. – Grogan

Answer 8

I developed 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
)

Steffen

Answer 9

Use foregroundImage with NetworkImage as profile image, and use backgroundImagewithAssetImage` as placeholder image, like this:

const CircleAvatar(
  radius: 60,
  backgroundColor: Colors.white,
  backgroundImage: AssetImage('assets/avatar.png'), // Placeholder
  foregroundImage: NetworkImage('https://xxx.xxx.xx.jpg'), // Profile
),

Breann

Answer 10

There is a new cached_network_image package that has a "loading" and an "error" images. Along with auto image caching. https://mcmap.net/q/320102/-flutter-default-image-to-image-network-when-it-fails

You can set as a placeholder anything you want, for example from your assets use Image.asset('assets/images/my_placeholder.png')

Naima