Виджет Image

Виджет Image рисует картинку из ImageProvider, который передают в параметр image, или из именованных конструкторов network, asset, file и memory. Размер задают width и height, вписывание в рамку - параметр fit типа BoxFit.

Синтаксис

Image(
	image: AssetImage('assets/pic.png'),
	width: 120,
	height: 80,
	fit: BoxFit.cover,
)

Параметры

Параметр	Описание
`image`	Провайдер картинки: `AssetImage`, `NetworkImage` и другие. Обязателен для основного конструктора.
`width`	Ширина области, в которой рисуется картинка.
`height`	Высота области рисования.
`fit`	Как вписать картинку в заданный размер. Принимает `BoxFit`.
`alignment`	К какому углу или стороне прижать картинку внутри области, если она не заполняет её целиком.
`color`	Цвет наложения. Работает вместе с `colorBlendMode`.
`errorBuilder`	Виджет, который показать, если загрузка не удалась.

Методы

Метод	Описание
`network`	Загружает картинку по URL. Давайте разберём параметры и примеры.
`asset`	Читает картинку из папки assets проекта. Давайте разберём синтаксис и примеры.
`file`	Показывает картинку из файла на устройстве. Давайте разберём параметры и примеры.
`memory`	Строит картинку из массива байтов в памяти.

Пример

Давайте покажем картинку из активов с фиксированным размером:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Image.asset(
						'assets/pic.png',
						width: 160,
						height: 120,
						fit: BoxFit.contain,
					),
				),
			),
		),
	);
}

На экране по центру появится картинка из файла assets/pic.png, вписанная в прямоугольник 160 на 120 пикселей.

Пример

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

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Image(
						image: NetworkImage('https://example.com/pic.png'),
						width: 200,
						fit: BoxFit.cover,
					),
				),
			),
		),
	);
}

На экране виджет запросит картинку по адресу и растянет её по ширине 200 с обрезкой лишнего по краям.

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

виджет FadeInImage,
который показывает заглушку, пока грузится основная картинка
перечисление BoxFit,
которое задаёт, как вписать картинку в рамку
класс AssetImage,
который описывает картинку из активов для провайдера
функция precacheImage,
которая загружает картинку заранее, до показа на экране