Картинка из сети Image.network в Flutter

Аватары и превью из интернета выводят Image.network. Первый аргумент - строка URL. Пока байты не пришли, место на экране уже занято, и полезно показать индикатор или заглушку.

Параметр loadingBuilder вызывается при загрузке: внутри можно вернуть CircularProgressIndicator или серый блок. Если картинка не загрузилась, срабатывает errorBuilder - там ставят иконку или текст «нет фото»:

import 'package:flutter/material.dart';

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

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

	static const photoUrl =
		'https://picsum.photos/seed/flutter/320/200'; // https, not cleartext

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(title: const Text('Network')),
			body: Center(
				child: ClipRRect(
					borderRadius: BorderRadius.circular(8),
					child: Image.network(
						photoUrl,
						width: 320,
						height: 200,
						fit: BoxFit.cover,
						loadingBuilder: (context, child, progress) {
							if (progress == null) return child;
							return const SizedBox(
								width: 320,
								height: 200,
								child: Center(
									child: CircularProgressIndicator(),
								),
							);
						},
						errorBuilder: (context, error, stack) {
							return const SizedBox(
								width: 320,
								height: 200,
								child: Icon(Icons.broken_image, size: 48),
							);
						},
					),
				),
			),
		);
	}
}

Покажите картинку 96×96 по адресу https://picsum.photos/seed/preview/96/96. Пока она грузится, на её месте только CircularProgressIndicator. В errorBuilder поставьте Icons.person размером 40.