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.

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.

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