# Stack

#### Что такое `Stack`

`Stack` — это виджет в Flutter, который позволяет располагать другие виджеты один над другим, накладывая их друг на друга. Подумайте о `Stack` как о слоеном торте, где каждый слой (или виджет) находится над предыдущим. Это позволяет создавать интересные эффекты и компоновки, когда элементы перекрываются.

#### Пример использования

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

<div align="left"><figure><img src="https://i.postimg.cc/7LcbpSD6/stack.png" alt="" width="188"><figcaption></figcaption></figure></div>

```dart
import 'package:flutter/material.dart';

class StackExample extends StatelessWidget {
  const StackExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Stack Example')),
      body: Stack(
        alignment: Alignment.center, // Выравнивание элементов в стеке
        children: [
          Container(
            width: 300,
            height: 200,
            color: Colors.blue, // Фон контейнера
          ),
          const Text(
            'Hello, Stack!',
            style: TextStyle(
              fontSize: 24,
              color: Colors.white,
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.green, // Фон контейнера
            ),
          ),
        ],
      ),
    );
  }
}
```

#### Как работает код

1. **Scaffold** — это основа для нашего интерфейса, как холст для художника.
2. **AppBar** — верхняя панель, где написано название приложения.
3. **Stack** — используется для наложения виджетов один на другой.
4. **Container** — создает синий прямоугольник, который будет фоном для текста.
5. **Text** — накладывает текст на контейнер, который расположен в центре стека.

#### Все настройки Stack

1. **children**
   * **Описание**: Список дочерних виджетов, которые будут накладываться друг на друга.
   *   **Пример**:

       ```dart
       children: [
         Container(...), // Первый слой
         Text(...), // Второй слой
       ] 
       ```
   * **Применение**: Позволяет указать, какие элементы будут находиться в стеке и в каком порядке (первый добавленный будет внизу, последний — вверху).
2. **alignment**
   * **Описание**: Определяет, как будут выровнены дочерние элементы внутри стека.
   *   **Пример**:

       ```dart
       alignment: Alignment.center // Элементы будут выровнены по центру стека
       ```
   * **Применение**: Полезно для управления расположением элементов внутри `Stack`, особенно если они меньше самого `Stack`.
3. **fit**
   * **Описание**: Определяет, как будут занимать пространство дочерние элементы. Может быть `StackFit.loose`, `StackFit.expand`, и т.д.
   *   **Пример**:

       ```dart
       fit: StackFit.expand // Все дочерние элементы займут все доступное пространство
       ```
   * **Применение**: Используется для контроля того, как элементы будут растягиваться или уменьшаться в зависимости от размера стека.

#### Итог

`Stack` — это мощный инструмент для создания сложных и интересных интерфейсов, когда вам нужно наложить элементы друг на друга. Если вы хотите создать эффекты перекрытия или нуждаетесь в свободном размещении виджетов, `Stack` поможет вам в этом.
