Функция precacheImage

Функция precacheImage принимает ImageProvider, BuildContext и необязательные size и onError. Возвращает Future, который завершается, когда картинка лежит в кэше образа. Так убирают мигание при первом показе NetworkImage или AssetImage.

Синтаксис

Future<void> precacheImage(
	ImageProvider provider,
	BuildContext context, {
	Size? size,
	ImageErrorListener? onError,
})

Параметры

Параметр	Описание
`provider`	Провайдер, который нужно загрузить. Обязательный аргумент.
`context`	Контекст для доступа к `MediaQuery` и bundle. Обязательный аргумент.
`size`	Желаемый размер декодирования. Экономит память на больших файлах.
`onError`	Обработчик ошибки загрузки или декодирования.

Пример

Давайте подгрузим сетевую картинку на экране загрузки:

import 'package:flutter/material.dart';

void main()
{
	runApp(const MaterialApp(home: PrecacheDemo()));
}

class PrecacheDemo extends StatefulWidget
{
	const PrecacheDemo({super.key});

	@override
	State<PrecacheDemo> createState() => _PrecacheDemoState();
}

class _PrecacheDemoState extends State<PrecacheDemo>
{
	bool ready = false;

	@override
	void didChangeDependencies()
	{
		super.didChangeDependencies();
		if (!ready) {
			precacheImage(
				const NetworkImage('https://example.com/pic.png'),
				context,
			).then((_) {
				if (mounted) {
					setState(() => ready = true);
				}
			});
		}
	}

	@override
	Widget build(BuildContext context)
	{
		if (!ready) {
			return const Scaffold(body: Center(child: Text('abcde')));
		}
		return Scaffold(
			body: Center(
				child: Image.network(
					'https://example.com/pic.png',
					width: 200,
				),
			),
		);
	}
}

На экране сначала текст 'abcde', затем картинка появится без задержки декодирования.

Пример

Давайте закэшируем актив перед переходом:

import 'package:flutter/material.dart';

void main()
{
	runApp(const MaterialApp(home: PrecacheAsset()));
}

class PrecacheAsset extends StatelessWidget
{
	const PrecacheAsset({super.key});

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: ElevatedButton(
					onPressed: () async {
						await precacheImage(
							const AssetImage('assets/pic.png'),
							context,
						);
						if (context.mounted) {
							Navigator.of(context).push(
								MaterialPageRoute(
									builder: (_) => Scaffold(
										body: Center(
											child: Image.asset('assets/pic.png'),
										),
									),
								),
							);
						}
					},
					child: const Text('12345'),
				),
			),
		);
	}
}

На втором экране Image.asset покажет файл сразу, потому что провайдер уже в кэше.

Смотрите также

виджет Image,
который рисует уже закэшированный провайдер
виджет FadeInImage,
который скрывает задержку загрузки заглушкой
класс NetworkImage,
который часто precache перед списком
метод evict,
который очищает кэш актива