В Flutter виджет «Стек» — это мощный инструмент для создания сложных макетов путем наложения нескольких виджетов друг на друга. Одним из важных аспектов создания визуально привлекательных пользовательских интерфейсов является обеспечение правильного выравнивания внутри стека. В этой статье мы рассмотрим различные методы выравнивания стека во Flutter, а также примеры кода для каждого подхода.

Метод 1: Виджет «Выравнивание»
Виджет «Выравнивание» позволяет размещать дочерний виджет внутри стека на основе определенного параметра выравнивания. Выравнивание можно указать с помощью класса Alignment, который предоставляет различные параметры выравнивания, например вверху слева, по центру, внизу справа и т. д. Вот пример:

Stack(
  children: [
    Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: Container(
        color: Colors.red,
        width: 100,
        height: 100,
      ),
    ),
  ],
)

Метод 2: позиционированный виджет
Позиционированный виджет обеспечивает больший контроль над размещением дочерних виджетов в стеке. Он позволяет указать точное положение виджета, используя такие свойства, как верх, низ, лево, право и т. д. Вот пример:

Stack(
  children: [
    Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    ),
    Positioned(
      top: 50,
      right: 50,
      child: Container(
        color: Colors.red,
        width: 100,
        height: 100,
      ),
    ),
  ],
)

Метод 3: Виджет FractionallySizedBox
Виджет FractionallySizedBox полезен, когда вы хотите выровнять виджет внутри стека на основе доли доступного пространства. Он позволяет вам указать параметры widthFactor и heightFactor для управления размером дочернего виджета. Вот пример:

Stack(
  children: [
    Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    ),
    FractionallySizedBox(
      widthFactor: 0.5,
      heightFactor: 0.5,
      alignment: Alignment.bottomLeft,
      child: Container(
        color: Colors.red,
        width: 100,
        height: 100,
      ),
    ),
  ],
)

Метод 4: пользовательское выравнивание с использованием Positioned.fill
Если ни один из предопределенных вариантов выравнивания не соответствует вашим требованиям, вы можете использовать виджет Positioned.fill для создания пользовательского выравнивания. Этот виджет позволяет вам определить объект Rect для размещения дочернего виджета в стеке. Вот пример:

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

В этой статье мы рассмотрели несколько методов выравнивания стека во Flutter. Используя виджеты Align, Positioned, FractionallySizedBox и Positioned.fill, вы можете точно настроить расположение дочерних виджетов в стеке для создания визуально привлекательных пользовательских интерфейсов. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим требованиям к макету.