Предварительная загрузка изображения флаттера

Возможно ли предварительно загрузить изображение в начале приложения? Как у меня есть фоновое изображение в моем ящике, но в первый раз, когда я открываю ящик, я вижу, что изображение мигает, как будто оно извлекается из активов, а затем отображается, и это дает мне плохой опыт, как только я вижу это в первый раз другим отверстия ящика ведут себя так, как ожидалось, потому что они кэшированы. Я бы предпочел бы его загружать на загрузку приложения, поэтому такого эффекта нет.

Ответ 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);
  }