Класс DecorationImage

Класс DecorationImage задаёт провайдер image, способ вписывания fit типа BoxFit, выравнивание alignment и повтор repeat типа ImageRepeat. Объект передают в BoxDecoration в параметр image.

Синтаксис

DecorationImage(
	image: AssetImage('assets/pic.png'),
	fit: BoxFit.cover,
	alignment: Alignment.center,
)

Параметры

Параметр	Описание
`image`	Источник картинки, например `AssetImage` или `NetworkImage`.
`fit`	Как вписать картинку в область. Принимает `BoxFit`.
`alignment`	К какому краю прижать картинку. Принимает `Alignment`.
`repeat`	Повторять ли картинку по области. Принимает `ImageRepeat`.

Пример

Давайте зальём фон контейнера картинкой из активов:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Container(
						width: 200,
						height: 120,
						decoration: BoxDecoration(
							borderRadius: BorderRadius.circular(8),
							image: const DecorationImage(
								image: AssetImage('assets/pic.png'),
								fit: BoxFit.cover,
							),
						),
					),
				),
			),
		),
	);
}

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

Пример

Давайте добавим полупрозрачный цветовой фильтр поверх фона:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Container(
						width: 180,
						height: 100,
						decoration: BoxDecoration(
							image: DecorationImage(
								image: NetworkImage('https://example.com/pic.png'),
								fit: BoxFit.cover,
								colorFilter: ColorFilter.mode(
									Colors.black.withValues(alpha: 0.4),
									BlendMode.darken,
								),
							),
						),
						alignment: Alignment.center,
						child: const Text(
							'abcde',
							style: TextStyle(color: Colors.white),
						),
					),
				),
			),
		),
	);
}

На экране текст 'abcde' лежит поверх затемнённой сетевой картинки.

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

класс BoxDecoration,
который принимает DecorationImage в параметре image
перечисление BoxFit,
которое задаёт вписывание фоновой картинки
перечисление ImageRepeat,
которое повторяет текстуру по оси
класс AssetImage,
который часто передают в image