Перечисление BoxFit

Перечисление BoxFit передают в параметр fit у Image, DecorationImage и других виджетов с рамкой. Значение выбирают по тому, нужно ли сохранить пропорции, обрезать края или растянуть картинку.

Синтаксис

BoxFit.cover

Значения

Значение	Описание
`fill`	Растягивает картинку на всю область. Пропорции могут исказиться.
`contain`	Вписывает картинку целиком в рамку с сохранением пропорций. Могут остаться пустые поля.
`cover`	Масштабирует так, чтобы область была закрыта полностью. Лишнее обрезается по краям.
`fitWidth`	Подгоняет ширину картинки под ширину области. Высота может выйти за рамку или не дотянуть.
`fitHeight`	Подгоняет высоту картинки под высоту области. Ширина может выйти за рамку или не дотянуть.
`none`	Рисует картинку в исходном масштабе без подгонки. Часть может обрезаться или не попасть в область.
`scaleDown`	Как `contain`, но не увеличивает картинку, если она и так меньше области.

Пример

Давайте сравним contain и cover в двух рамках:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Row(
						mainAxisSize: MainAxisSize.min,
						children: [
							Image.asset(
								'assets/pic.png',
								width: 100,
								height: 140,
								fit: BoxFit.contain,
							),
							const SizedBox(width: 16),
							Image.asset(
								'assets/pic.png',
								width: 100,
								height: 140,
								fit: BoxFit.cover,
							),
						],
					),
				),
			),
		),
	);
}

На экране слева картинка целиком в рамке с полями, справа та же рамка заполнена с обрезкой краёв.

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

перечисление ImageRepeat,
которое повторяет текстуру по оси
виджет Image,
который принимает fit в параметрах
класс DecorationImage,
который вписывает фон в BoxDecoration
виджет FadeInImage,
который использует тот же fit для двух картинок