Виджет FadeInImage

Виджет FadeInImage держит на экране placeholder, пока не готова image. Переход настраивают fadeInDuration и fadeOutDuration. Для сети удобны конструкторы memoryNetwork и assetNetwork. Размер и fit работают так же, как у Image.

Синтаксис

FadeInImage(
	placeholder: MemoryImage(bytes),
	image: NetworkImage('https://example.com/pic.png'),
	width: 160,
	height: 120,
	fit: BoxFit.cover,
)

Параметры

Параметр	Описание
`placeholder`	Провайдер картинки-заглушки. Показывается до готовности `image`.
`image`	Провайдер основной картинки. Обязательный параметр.
`width`	Ширина области.
`height`	Высота области.
`fit`	Вписывание обеих картинок. Принимает `BoxFit`.
`fadeInDuration`	Длительность появления основной картинки.
`fadeOutDuration`	Длительность исчезновения заглушки.

Методы

Метод	Описание
`memoryNetwork`	Заглушка из байтов, основная картинка по URL.
`assetNetwork`	Заглушка из активов, основная картинка по URL.

Пример

Давайте сменим заглушку из активов на сетевую картинку:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: FadeInImage.assetNetwork(
						placeholder: 'assets/pic.png',
						image: 'https://example.com/pic.png',
						width: 200,
						fit: BoxFit.contain,
					),
				),
			),
		),
	);
}

На экране сначала видна локальная заглушка, затем она плавно сменится картинкой с сервера.

Пример

Давайте зададим свои длительности затухания:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: FadeInImage.assetNetwork(
						placeholder: 'assets/pic.png',
						image: 'https://example.com/pic.png',
						width: 180,
						fadeInDuration: const Duration(milliseconds: 600),
						fadeOutDuration: const Duration(milliseconds: 200),
					),
				),
			),
		),
	);
}

На экране переход станет заметнее: заглушка быстрее исчезнет, основная картинка дольше проявится.

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

метод memoryNetwork,
который берёт заглушку из памяти
виджет Image,
который показывает одну готовую картинку
метод network,
который загружает картинку без плавной смены
функция precacheImage,
которая заранее кэширует провайдер картинки