Предварительная загрузка изображения флаттера
Возможно ли предварительно загрузить изображение в начале приложения? Как у меня есть фоновое изображение в моем ящике, но в первый раз, когда я открываю ящик, я вижу, что изображение мигает, как будто оно извлекается из активов, а затем отображается, и это дает мне плохой опыт, как только я вижу это в первый раз другим отверстия ящика ведут себя так, как ожидалось, потому что они кэшированы. Я бы предпочел бы его загружать на загрузку приложения, поэтому такого эффекта нет.
Ответы
Ответ 1
Используйте функцию precacheImage
чтобы начать загрузку изображения до создания вашего ящика. Например, в виджетах, которые содержат ваш ящик:
class MyWidgetState extends State<MyWidget> {
@override
void initState() {
// adjust the provider based on the image type
precacheImage(new AssetImage('...'));
super.initState();
}
}
Ответ 2
Чтобы избавиться от "мигания", вы можете просто использовать класс FadeInImage
в сочетании с transparent_image
, который будет исчезать, а не появляться мгновенно. Использование в вашем случае выглядит следующим образом:
// you need to add transparent_image to your pubspec and import it
// as it is required to have the actual image fade in from nothing
import 'package:transparent_image/transparent_image.dart';
import 'package:flutter/material.dart';
...
FadeInImage(
placeholder: MemoryImage(kTransparentImage),
image: AssetImage('image.png'),
)
Ответ 3
У меня были проблемы с верхним решением, которое использует precacheImage() внутри initState. Код ниже разрешил их. Также обратите внимание, что вы можете не увидеть ожидаемые результаты в режиме отладки, а только в режиме выпуска.
Image myImage;
@override
void initState() {
super.initState();
myImage= Image.asset(path);
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
precacheImage(myImage.image, context);
}