🧩Stack

Что такое Stack

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

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

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

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

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

   • Пример:

     children: [
       Container(...), // Первый слой
       Text(...), // Второй слой
     ] 

   • Применение: Позволяет указать, какие элементы будут находиться в стеке и в каком порядке (первый добавленный будет внизу, последний — вверху).

2. alignment

   • Описание: Определяет, как будут выровнены дочерние элементы внутри стека.

   • Пример:

     alignment: Alignment.center // Элементы будут выровнены по центру стека

   • Применение: Полезно для управления расположением элементов внутри Stack, особенно если они меньше самого Stack.

3. fit

   • Описание: Определяет, как будут занимать пространство дочерние элементы. Может быть StackFit.loose, StackFit.expand, и т.д.

   • Пример:

     fit: StackFit.expand // Все дочерние элементы займут все доступное пространство

   • Применение: Используется для контроля того, как элементы будут растягиваться или уменьшаться в зависимости от размера стека.

Итог

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