Класс BoxDecoration

Класс BoxDecoration описывает, как нарисовать прямоугольник. Цвет фона задаёт color типа Color, линию по краю - border, скругление - borderRadius типа BorderRadius, тень - boxShadow. Объект передают в decoration у Container и DecoratedBox.

Синтаксис

BoxDecoration(
	color: Color(0xFFE3F2FD),
	borderRadius: BorderRadius.circular(12),
)

Методы

Метод	Описание
`copyWith`	Собирает оформление, в котором заменены только переданные поля.
`lerp`	Анимирует переход между двумя `BoxDecoration`.
`scale`	Умножает толщину рамки и размытие тени на коэффициент.

Пример

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

import 'package:flutter/material.dart';

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

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

Пример

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

import 'package:flutter/material.dart';

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

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

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

класс AlignmentDirectional,
точка с учетом направления письма
класс Alignment,
точка внутри прямоугольника
класс ShapeDecoration,
фон произвольной формы
класс Border,
четыре стороны рамки