предварительная загрузка изображения списка - PullRequest
0 голосов
/ 08 октября 2018

Мое приложение флаттера хотело бы показать изображение из firebase, вызвав image.network ().Но изображения выводятся с опозданием немного.Пожалуйста, помогите решить эту проблему.Как предварительно загрузить изображения или сохранить изображения в кэш заранее?

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, изображение также отображается поздно.Я думаю, что сделал ошибку.Пожалуйста, помогите.

1 Ответ

0 голосов
/ 09 октября 2018

Для подобных случаев в флаттере есть виджет, который выходит из коробки и называется 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, вы можете использовать любое автономное изображение, хранящееся в активах, например логотип вашей компании, и когда изображения загружаются, они исчезают и становятся свежими.изображение исчезнет, ​​что приведет к хорошему UX.

...