列表的颤动预加载图像

Question

我的 flutter 应用程序想通过调用 image.network() 来显示来自 firebase 的图像。但是图像显示有点晚。请帮助解决这个问题。如何预加载图片或提前将图片存入缓存？

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

更新：

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

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

请查看我使用 CachedNetworkImageProvider 的更新，图像也显示延迟。我想我犯了一些错误。请大家帮忙

Answer 1

对于这种情况，flutter中有一个开箱即用的Widget，叫做FadeInImage。你可以这样使用它：

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

这里重要的属性是 placeHolder，您可以使用存储在资产中的任何离线图像，例如您的公司徽标，当图像加载时，这将淡出，新图像将淡入前导一个不错的用户体验。

列表的颤动预加载图像

flutter preload image of list

caching

image

preload

flutter