Метод network

Метод network виджета Image создаёт Image с провайдером NetworkImage. Первый аргумент url - строка адреса. Размер и вписывание задают width, height и fit.

Синтаксис

Image.network(
	'https://example.com/pic.png',
	width: 120,
	height: 80,
	fit: BoxFit.cover,
)

Параметры

Параметр	Описание
`url`	Адрес картинки в сети. Обязательный аргумент.
`width`	Ширина в логических пикселях.
`height`	Высота в логических пикселях.
`fit`	Способ вписать картинку. Принимает `BoxFit`.
`headers`	Дополнительные HTTP заголовки для запроса.
`loadingBuilder`	Виджет на время загрузки. Получает прогресс и дочерний виджет.
`errorBuilder`	Виджет при ошибке загрузки.

Пример

Давайте выведем картинку по адресу в центре экрана:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Image.network(
						'https://example.com/pic.png',
						width: 180,
						height: 120,
						fit: BoxFit.contain,
					),
				),
			),
		),
	);
}

На экране появится картинка с https://example.com/pic.png, вписанная в прямоугольник по центру.

Пример

Давайте покажем индикатор, пока файл ещё грузится:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Image.network(
						'https://example.com/pic.png',
						width: 200,
						loadingBuilder: (context, child, progress) {
							if (progress == null) {
								return child;
							}
							return const CircularProgressIndicator();
						},
					),
				),
			),
		),
	);
}

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

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

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