Container, Padding и отступы

Container — это универсальная коробка с размером, отступами, цветом и рамкой; Padding и SizedBox — лёгкие инструменты для пространства.

Суть: Container объединяет размер, отступы (padding), внешние поля (margin), цвет и декорацию. Для простого отступа есть Padding, для фиксированного промежутка — SizedBox.

Container обладает скрытой особенностью: если не задать ему размер, он сжимается до размера ребёнка, а если ребёнка нет — наоборот, стремится занять всё доступное место. Это поведение часто удивляет новичков, у которых пустой Container внезапно растягивается на весь экран. Понимание этого правила экономит много недоумённых минут перед экраном, где «коробка ведёт себя не так».

Без отступов интерфейс выглядит слипшимся: текст упирается в края, кнопки прилипают друг к другу. Container — швейцарский нож вёрстки: задаёт ширину и высоту, добавляет внутренний отступ padding, внешний margin, фон и скруглённые углы. Когда нужен только отступ или только размер — берут более лёгкие виджеты.

Container(
  width: 200,
  height: 100,
  padding: const EdgeInsets.all(16),       // внутренний отступ
  margin: const EdgeInsets.only(top: 8),   // внешнее поле
  decoration: BoxDecoration(
    color: Colors.blue.shade100,
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text('Карточка'),
)

const Padding(
  padding: EdgeInsets.symmetric(horizontal: 24),
  child: Text('С отступами по бокам'),
)

const SizedBox(height: 16)   // пустой промежуток 16px между виджетами

EdgeInsets задаёт отступы разными способами: all(16) — со всех сторон, symmetric(horizontal: 24) — по бокам, only(top: 8) — с одной стороны. SizedBox — самый дешёвый способ добавить пустое место между элементами.

Как различать padding и margin под капотом

padding — это пространство внутри контейнера, между его границей и содержимым. margin — пространство снаружи, отодвигающее контейнер от соседей. BoxDecoration добавляет визуал: цвет, скругление, тень, рамку (нельзя одновременно задавать color у Container и decoration — цвет указывают внутри декорации).

  margin (снаружи)
  +-----------------------------------+
  |  Container                        |
  |   +---------------------------+   |  <- граница/фон (decoration)
  |   |  padding (внутри)         |   |
  |   |    +-----------------+    |   |
  |   |    |  child: Text    |    |   |
  |   |    +-----------------+    |   |
  |   +---------------------------+   |
  +-----------------------------------+

# Модель box-модели: padding внутри, margin снаружи
def box(content, padding=0, margin=0):
    inner = ' ' * padding + content + ' ' * padding
    border = '+' + '-' * len(inner) + '+'
    outer_pad = ' ' * margin
    lines = [
        outer_pad + border,
        outer_pad + '|' + inner + '|',
        outer_pad + border,
    ]
    return '\n'.join(lines)

print(box('Карточка', padding=3, margin=2))

Частые ошибки

Одновременно color и decoration у Container — ошибка; цвет указывают внутри BoxDecoration.
Путать padding и margin — внутренний и внешний отступ дают разный визуальный результат.
Использовать тяжёлый Container ради одного отступа — для этого есть лёгкий Padding.

Best practices

Для простого отступа — Padding, для пустого промежутка — SizedBox, и только для сложной коробки — Container.
Держите единую шкалу отступов (4, 8, 16, 24) — интерфейс выглядит аккуратнее.
Ставьте const у EdgeInsets и неизменяемых виджетов отступа.

Для отзывчивого дизайна полезно знать про EdgeInsets.fromLTRB, задающий все четыре стороны по отдельности, и про возможность умножать отступы на масштабный коэффициент экрана. Но в большинстве случаев дисциплина важнее гибкости: выберите шкалу из кратных четырём значений и придерживайтесь её во всём приложении. Единая ритмика отступов — это то, что отличает любительский интерфейс от профессионального гораздо сильнее, чем выбор цветов.

Итог: Container, Padding и SizedBox дают полный контроль над пространством. Понимание разницы между внутренним padding и внешним margin — основа аккуратной вёрстки. Дальше научимся показывать длинные списки.