image asset

Quick Tip – How to use Image placeholder in Flutter

Basics /

What is the network image in Flutter

In Flutter, the NetworkImage is a widget that displays an image from a URL. It’s part of the Flutter framework’s dart:ui library. You can use it to display an image that is obtained from the internet, rather than one that is stored locally on the device. Here’s an example of how you might use it:

Image(
  image: NetworkImage('https://picsum.photos/250?image=9'),
)

You can also specify the width and height of the image, as well as other properties like the fit and alignment:

Image(
  width: 100,
  height: 100,
  fit: BoxFit.fitWidth,
  alignment: Alignment.topCenter,
  image: NetworkImage('https://picsum.photos/250?image=9'),
)

Keep in mind that using a NetworkImage can be slower than using a locally stored image, because it has to download the image from the internet before it can be displayed. If you need to display a lot of images, or if you need to display images quickly, you might want to consider using a caching mechanism like the CachedNetworkImage widget.

What is an image placeholder in Flutter?

An image placeholder is a temporary image that is displayed while a real image is being loaded. Image placeholders can be useful in a number of situations, such as when you are displaying a list of items and each item has an associated image.

Keep in mind that using a placeholder can improve the user experience by giving the user something to look at while the image is being loaded, rather than showing a blank space. It can also improve the performance of your app by allowing it to load images in the background and display them when they are ready.

How to load images from the network with a placeholder in Flutter

To use the CachedNetworkImage as an image placeholder in Flutter, you can use the placeholder argument when constructing the CachedNetworkImage widget. The placeholder argument takes a widget that will be displayed while the image is being loaded.

To use it you have to add CachedNetworkImage to pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.2.0

In your dart file import the package.

import 'package:cached_network_image/cached_network_image.dart';

Use it in the desired place.

CachedNetworkImage(
                imageUrl: 'https://tinyurl.com/flutterassets',
                placeholder: (context, url) => CircularProgressIndicator(),
                errorWidget: (context, url, error) => Icon(Icons.error),
              ),
image asset

Here is another example:

CachedNetworkImage(
  imageUrl: 'https://example.com/image.png',
  placeholder: (context, url) => Container(
    width: 50,
    height: 50,
    color: Colors.grey,
  ),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

In this example, the CachedNetworkImage widget will display a grey container with a size of 50×50 pixels while the image is being loaded. If there is an error loading the image, it will display an error icon instead.

Keep in mind that the CachedNetworkImage widget is a caching mechanism for network images. It works by downloading images from the network and storing them in a cache so that they can be displayed quickly the next time they are needed. This can improve the performance of your app by reducing the time it takes to load images, especially if you are displaying a lot of images or if you are displaying the same images multiple times.

How to use FadeInImage as a placeholder in Flutter

To use the FadeInImage as a placeholder in Flutter, you can use the placeholder argument when constructing the FadeInImage widget. The placeholder argument takes a widget that will be displayed while the image is being loaded. Here’s an example of how you might use it:

FadeInImage(
  placeholder: AssetImage('assets/FlutterAssets_logo.png'),
  image: NetworkImage('https://tinyurl.com/flutterassets'),
),

In this example, the FadeInImage widget will display the image assets/placeholder.png from the local assets while the network image is being loaded. When the network image is finished loading, it will fade in over the placeholder image.

You can also use these codes:

FadeInImage.assetNetwork(
                  placeholder: 'assets/FlutterAssets_logo.png',
                  image: 'https://tinyurl.com/flutterassets',
              ),

//or use gif image as placeholder

              FadeInImage.assetNetwork(
                  placeholder: 'assets/loading.gif',
                  image: 'https://tinyurl.com/flutterassets',
              ),

You can also specify the fadeOutDuration and fadeOutCurve when the image is no longer visible.

FadeInImage(
  placeholder: AssetImage('assets/FlutterAssets_logo.png'),
  image: NetworkImage('https://tinyurl.com/flutterassets'),
  fadeOutDuration: Duration(milliseconds: 500),
  fadeOutCurve: Curves.easeOut,
),

Keep in mind that the FadeInImage widget is a convenience widget that combines the Placeholder and Image widgets. It allows you to specify a placeholder image that will be displayed while the real image is being loaded, and then it will fade in the real image when it’s ready. This can improve the user experience by giving the user something to look at while the image is being loaded, and by providing a smooth transition when the real image is displayed.

You can read more about Images in Flutter in this post: Flutter Basics – How to use an image in Flutter

Related Posts