flutter preload image of list

Question

My flutter app would like to show image from firebase by calling image.network(). But the images displaying late a bit. Please kindly help to solve this issue. How to preload the images or save images into cache in advance?

child: ListTile(
                leading: Image.network(
                  food.thumbnail,
                  width: 60.0,
                ),
                title: Text(
                    food.foodName + "     " + '\$' + food.foodPrice.toString()),
                subtitle: Text('編碼： ' + food.foodCode),
                onTap: () {}),

updated:

child: ListTile(
                leading:
                Image(image: new CachedNetworkImageProvider(food.thumbnail),
                width: 60.0,),

                title: Text(
                    food.foodName + "     " + '\$' + food.foodPrice.toString()),
                subtitle: Text('編碼： ' + food.foodCode),
                onTap: () {}),
          ),

Please see my update that using CachedNetworkImageProvider, The image are also displaying late. I think I made some mistake. Please kindly help.

Answer 1

For cases like this, there is a Widget in flutter which comes out of the box and it is called FadeInImage. You can use it like this:

FadeInImage(
  height: 200.0, // Change it to your need
  width: 300.0, // Change it to your need
  fit: BoxFit.cover,
  placeholder: AssetImage("assets/company_logo.jpg"),
  image: NetworkImage(your_image_url),
),

The important property here is the placeHolder, you can use any offline image stored in Assets like your company logo and when the images loads this will fade out and fresh image will fade in leading to a nice UX.