Метод assetNetwork

Метод assetNetwork виджета FadeInImage принимает путь placeholder к файлу в активах и строку image с URL. Локальный файл виден сразу, сетевая картинка подменяет его после декодирования, как у FadeInImage.

Синтаксис

FadeInImage.assetNetwork(
	placeholder: 'assets/pic.png',
	image: 'https://example.com/pic.png',
	width: 160,
	fit: BoxFit.cover,
)

Параметры

Параметр	Описание
`placeholder`	Путь к заглушке в активах, например `assets/pic.png`. Обязательный аргумент.
`image`	URL основной картинки. Обязательный аргумент.
`bundle`	Набор активов для `placeholder`. По умолчанию из контекста или `rootBundle`.
`width`	Ширина в логических пикселях.
`height`	Высота в логических пикселях.
`fit`	Вписывание. Принимает `BoxFit`.

Пример

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

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: 220,
						fit: BoxFit.contain,
					),
				),
			),
		),
	);
}

На экране сразу видна assets/pic.png, затем плавно появится картинка с сервера.

Пример

Давайте обрежем обе картинки одним BoxFit.cover:

import 'package:flutter/material.dart';

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

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

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

метод memoryNetwork,
который хранит заглушку в байтах
метод asset,
который показывает только файл из активов
класс AssetImage,
который лежит за путём placeholder
метод network,
который грузит сеть без заглушки