Спросите помощника

0/400

Вопрос обрабатывается ИИ-сервисом и сохраняется для улучшения ответов. Не вводите персональные данные.

Container

Универсальная коробка: размер, внутренний и внешний отступ, заливка или оформление, выравнивание ребёнка и ограничения — в одном элементе. Когда нужно что-то одно (только отступ, только размер), проще взять специализированный элемент: 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 .