Метод memoryNetwork

Метод memoryNetwork виджета FadeInImage принимает placeholder типа Uint8List и строку image с URL. Пока NetworkImage не декодируется, на экране остаётся MemoryImage из переданных байтов.

Синтаксис

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

Параметры

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

Пример

Давайте подставим байты из актива и сетевой адрес:

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

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

	@override
	State<FadeDemo> createState() => _FadeDemoState();
}

class _FadeDemoState extends State<FadeDemo>
{
	Uint8List? placeholder;

	@override
	void initState()
	{
		super.initState();
		rootBundle.load('assets/pic.png').then((data) {
			setState(() => placeholder = data.buffer.asUint8List());
		});
	}

	@override
	Widget build(BuildContext context)
	{
		if (placeholder == null) {
			return const Scaffold(body: Center(child: CircularProgressIndicator()));
		}
		return Scaffold(
			body: Center(
				child: FadeInImage.memoryNetwork(
					placeholder: placeholder!,
					image: 'https://example.com/pic.png',
					width: 200,
					fit: BoxFit.contain,
				),
			),
		);
	}
}

На экране сначала покажутся байты из assets/pic.png, затем плавно появится картинка с https://example.com/pic.png.

Пример

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

import 'dart:typed_data';

import 'package:flutter/material.dart';

void main()
{
	final placeholder = Uint8List(0);
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: FadeInImage.memoryNetwork(
						placeholder: placeholder,
						image: 'https://example.com/pic.png',
						width: 120,
						fadeInDuration: const Duration(milliseconds: 300),
					),
				),
			),
		),
	);
}

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

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

метод assetNetwork,
который берёт заглушку из активов
виджет FadeInImage,
который принимает любые провайдеры
метод memory,
который рисует только байты без сети
класс MemoryImage,
который описывает провайдер для placeholder