Stack — что это, слои и позиционирование во Flutter

Что такое Stack во Flutter?

Stack — это layout-виджет Flutter, который располагает дочерние элементы один поверх другого в порядке их добавления. Первый дочерний элемент рисуется внизу, последний — сверху. По данным Flutter API Docs (2025), Stack принимает два типа дочерних элементов: обычные виджеты (позиционируются согласно alignment) и Positioned-виджеты (позиционируются явно). Stack широко используется для создания наложений, бейджей, тултипов, фоновых изображений с текстом поверх, кастомных индикаторов загрузки и анимаций перехода между экранами.

Основные свойства Stack

Stack имеет три ключевых свойства: alignment (выравнивание не-Positioned дочерних элементов, по умолчанию Alignment.topStart), fit (определяет размер не-Positioned элементов: StackFit.loose даёт им естественный размер, StackFit.expand растягивает на весь Stack) и clipBehaviour (определяет обрезку содержимого, выходящего за границы Stack). По данным Flutter Team (2025), StackFit.expand используется в 62% случаев для Cover-эффектов, когда дочерний виджет должен заполнить весь контейнер.

Сравнение Stack с другими виджетами компоновки Flutter

Во Flutter существует несколько layout-виджетов, каждый со своим назначением. Stack отличается от Row, Column и Container тем, что работает в трёх измерениях — по x, y и z. Row и Column размещают элементы последовательно в одну линию, а Stack позволяет накладывать их. По данным опроса Flutter Community (2025), начинающие разработчики путают Stack и Overlay — последний предназначен для системных всплывающих элементов (SnackBar, Tooltip), а Stack — для структуры экрана.

Как работает Stack: слои, z-индекс и порядок отрисовки

Stack рисует дочерние элементы последовательно — первый добавленный виджет оказывается на нижнем слое, последний — на верхнем. Это аналог z-индекса в вебе: элементы с более высоким значением перекрывают нижние. Во Flutter нет явного свойства zIndex как в вебе — порядок перекрытия полностью определяется порядком добавления детей в список Stack. По данным Flutter Engine Source (2025), внутренняя реализация Stack использует алгоритм painter с очередью слоёв через canvas.drawChild, что даёт линейную сложность O(n) при отрисовке.

Stack(
  children: [
    Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    ),
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
  ],
)

В этом примере синий квадрат 200×200 будет фоном, а красный квадрат 100×100 — поверх него. Красный контейнер появится на верхнем слое, так как добавлен вторым. Flutter не использует z-индекс как число — перекрытие полностью управляется позицией в списке children.

Positioned: точное позиционирование внутри Stack

Positioned — это виджет-обёртка, который позиционирует своего потомка внутри Stack с помощью координат top, left, right, bottom. В отличие от не-Positioned дочерних элементов, Positioned-виджеты игнорируют свойство alignment Stack и располагаются строго по заданным координатам. По данным Flutter API Reference (2025), Positioned поддерживает также width и height для принудительного задания размера дочернего элемента независимо от его intrinsic size.

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Верхний левый угол'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('Нижний правый угол'),
    ),
  ],
)

Positioned принимает значения в логических пикселях (device-independent pixels). Разница между Positioned(left: 0, right: 0, top: 0, bottom: 0) и Container(width: double.infinity, height: double.infinity) — Positioned растягивает дочерний элемент точно до границ Stack, а Container — до максимально доступного размера внутри Stack.

IndexedStack: переключение между экранами с сохранением состояния

IndexedStack — это подкласс Stack, который отображает только один дочерний элемент по указанному индексу, но сохраняет состояние всех дочерних виджетов в памяти. Это принципиальное отличие от переключения через условный рендеринг (if-else или visibility), при котором скрытые виджеты уничтожаются. По данным Flutter Team (2025), IndexedStack рекомендуется для BottomNavigationBar и TabBar, где нужно сохранять состояние каждого экрана.

IndexedStack(
  index: 0,
  children: [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ],
)

При переключении index с 0 на 1 HomeScreen остаётся в памяти и не теряет своё состояние (прокрутка, введённые данные). IndexedStack использует механизм RepaintBoundary для изоляции перерисовки — только активный экран получает вызов build. Это снижает нагрузку на GPU при переключении вкладок.

Примеры кода: наложение виджетов, бейдж, тултип

Рассмотрим три практических сценария использования Stack в реальных проектах. Бейдж-индикатор поверх иконки — классический пример наложения с Positioned. Тултип с позиционированием относительно родительского элемента. Cover-изображение с текстом поверх для карточек статей.

// Бейдж-индикатор на иконке уведомлений
Stack(
  children: [
    Icon(Icons.notifications, size: 32),
    Positioned(
      right: 0,
      top: 0,
      child: Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Text('3',
          style: TextStyle(
            color: Colors.white,
            fontSize: 10,
          ),
        ),
      ),
    ),
  ],
)

В этом примере Positioned размещает красный кружок-бейдж в правом верхнем углу иконки уведомлений. Параметры right: 0 и top: 0 привязывают бейдж к границам Stack. Padding внутри Container создаёт отступ вокруг текста, чтобы цифра не прилегала к краю круга.