Виджет DecoratedBox

Виджет DecoratedBox рисует оформление и кладёт поверх дочерний виджет. Само оформление передают в decoration типа Decoration, обычно это BoxDecoration. Отступ внутри фона этот виджет не добавляет: его задают отдельно.

Синтаксис

DecoratedBox(
	decoration: BoxDecoration(
		color: Color(0xFFE3F2FD),
	),
	child: child,
)

Параметры

Параметр	Описание
`decoration`	Фон, рамка и тень. Принимает `Decoration`.
`child`	Дочерний виджет поверх оформления.

Пример

Давайте нарисуем голубую плашку со скруглением:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: DecoratedBox(
						decoration: BoxDecoration(
							color: Color(0xFFE3F2FD),
							borderRadius: BorderRadius.circular(12),
						),
						child: Padding(
							padding: EdgeInsets.all(16),
							child: Text('abcde'),
						),
				),
			),
		),
	));
}

На экране голубой скруглённый прямоугольник и строка 'abcde'.

Пример

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

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: DecoratedBox(
						decoration: BoxDecoration(
							color: Color(0xFFFFFFFF),
							border: Border.all(color: Color(0xFF1565C0), width: 2),
						),
						child: Padding(
							padding: EdgeInsets.all(16),
							child: Text('12345'),
						),
				),
			),
		),
	));
}

На экране белый прямоугольник с синей рамкой и строка '12345'.

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

виджет ColoredBox,
залить дочерний виджет цветом
класс RRect,
прямоугольник со скруглением
виджет ClipRect,
обрезать по прямоугольнику
виджет ClipRRect,
обрезать по скруглению