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

1. Базовая реализация стека:
   Виджет «Стек» позволяет размещать несколько виджетов друг на друге. Вот простой пример:

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

В этом примере красный контейнер расположен поверх синего контейнера.

2. Размещение виджетов в стеке.
   Вы можете расположить виджеты в стеке с помощью виджета Positioned. Вот пример:

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

В этом примере мы используем виджет Positioned, чтобы указать положение каждого контейнера в стеке.

3. Совмещение виджетов разных размеров.
   Виджет «Стек» позволяет группировать виджеты разных размеров. Вот пример:

Stack(
  children: [
    Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.red,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.blue,
    ),
  ],
)

В этом примере первый контейнер занимает все доступное пространство, а второй контейнер имеет фиксированный размер.

4. Перекрытие виджетов с дробными смещениями:
   Вы можете использовать FractionalOffset, чтобы указать положение виджета в стеке, используя дробные значения. Вот пример:

Stack(
  children: [
    Positioned(
      top: 0.3,
      left: 0.3,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    ),
    Positioned(
      top: 0.5,
      left: 0.5,
      child: Container(
        width: 150,
        height: 150,
        color: Colors.blue,
      ),
    ),
  ],
)

В этом примере значения FractionalOffsetдля 0.3и 0.5позиционируют контейнеры в стеке.

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