Ask the assistant

0/400

Your question is processed by an AI service and kept to improve answers. Do not enter personal data.

Container

This page has not been translated into English yet. The Russian original is below.

Универсальная коробка: размер, внутренний и внешний отступ, заливка или оформление, выравнивание ребёнка и ограничения — в одном элементе. Когда нужно что-то одно (только отступ, только размер), проще взять специализированный элемент: Padding , SizedBox , ColoredBox , DecoratedBox .

Тип: single-child

Container color:#4f46e5 width:200 height:100
  Center
    Text "Привет"

Параметры

Параметр	Тип	Default	Описание
`width`	длина	—	Ширина: число (пиксели) или строка с единицей — `"50%"` , `"100svh"`
`height`	длина	—	Высота, те же единицы
`color`	color	—	Заливка. Игнорируется, если задан `#decoration` — цвет тогда пишется внутрь декорации
`alignment`	string	—	Куда поставить ребёнка внутри коробки: `center` , `topLeft` , `bottomRight` и т. д.
`clipBehavior`	string	none	Обрезка ребёнка по границам: `none` , `hardEdge` , `antiAlias` , `antiAliasWithSaveLayer`

Длины: голое число и px — пиксели; vh / svh / lvh / dvh , vw / svw / lvw / dvw , vmin / vmax — доля окна; % — доля места, которое даёт родитель (если родитель по этой оси не ограничен, процента нет). Другие единицы ( rem , em ) не поддерживаются.

Вложенные структуры

`#padding` и `#margin`

Отступ внутри коробки и снаружи неё. Формат тот же, что у Padding : all , symmetric , only , fromLTRB (значения fromLTRB — позиционные : #padding fromLTRB 10 15 20 25 ).

`#decoration`

Оформление: цвет, скругление, рамка, градиент, тень, фоновое изображение. Устроено так же, как у DecoratedBox .

`#constraints`

Нижние и верхние границы размера: minWidth , maxWidth , minHeight , maxHeight (числа или строки с единицей).

Container
  #constraints minHeight:120 maxWidth:480
  Text "Не уже ширины текста, но не шире 480"

Примеры

Карточка с отступом и скруглением

Container
  #padding all 16
  #margin symmetric horizontal:24 vertical:8
  #decoration color:#1e1b4b
    #borderRadius circular 12
  Column spacing:4
    Text "Заголовок"
    Text "Описание карточки"

Ребёнок в углу

Container width:200 height:120 alignment:bottomRight color:#36345E
  Text "Внизу справа"

Обрезка по скруглению

Чтобы содержимое не выходило за скруглённые углы, включите обрезку:

Container width:160 height:160 clipBehavior:antiAlias
  #decoration color:#585593
    #borderRadius circular 24
  Image src:"https://example.com/poster.jpg" fit:cover

Различия между приложением и сайтом

Пустой Container без размеров. В приложении коробка без ребёнка и без width / height занимает всё доступное место. На сайте это пустой блок без высоты — его заливки не видно. Всегда задавайте размер или ребёнка.
clipBehavior на сайте различает только «обрезать» и «не обрезать»: любое значение, кроме none , даёт одинаковую обрезку.
Именованные режимы #constraints ( expand , tight , loose ) на сайте не читаются — работает только форма с minWidth / maxWidth / minHeight / maxHeight .

Bad practices

`color` вместе с `#decoration`

// BAD — color молча отбрасывается: когда есть #decoration, фон берётся только из неё
Container color:#FF0000
  #decoration
    #borderRadius circular 8
  Text "Красный?"

// GOOD — цвет живёт в декорации
Container
  #decoration color:#FF0000
    #borderRadius circular 8
  Text "Красный"

Best practices

Берите узкий элемент, когда он покрывает задачу : только отступ — Padding , только размер — SizedBox . Container оправдан, когда нужно сразу несколько свойств.
Не ставьте width / height на тот же Container , которому нужно растягиваться в Column / Row — оберните его в Expanded .