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

在这种情况下，随手可得的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，您可以使用存储在Assets中的任何脱机图像（例如公司徽标），并且在加载图像时，该图像将逐渐消失，而新的图像也会逐渐消失，从而形成漂亮的用户体验。

列表的颤振预加载图像

1 个答案: