🧩AlertDialog

Что такое AlertDialog

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

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

Вот простой пример, как использовать AlertDialog в приложении Flutter:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AlertDialog Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _showDialog(context);
          },
          child: const Text('Показать диалог'),
        ),
      ),
    );
  }

  void _showDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Подтверждение'),
          content: const Text('Вы уверены, что хотите продолжить?'),
          actions: <Widget>[
            TextButton(
              child: const Text('Отмена'),
              onPressed: () {
                Navigator.of(context).pop(); // Закрывает диалог
              },
            ),
            TextButton(
              child: const Text('Продолжить'),
              onPressed: () {
                // Действие при подтверждении
                Navigator.of(context).pop(); // Закрывает диалог
              },
            ),
          ],
        );
      },
    );
  }
}

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

1. showDialog: Эта функция отображает диалоговое окно. Она принимает контекст и функцию построения, которая создает виджет AlertDialog.

2. AlertDialog: Основной виджет, представляющий диалоговое окно.

3. title: Заголовок диалогового окна, обычно используется для объяснения его назначения.

4. content: Основное содержание диалогового окна, в котором может быть текст или другие виджеты.

5. actions: Список кнопок, которые можно использовать для взаимодействия с пользователем (например, "ОК" и "Отмена").

6. Navigator.of(context).pop(): Метод, который закрывает диалоговое окно.

Все настройки AlertDialog

1. Widget? icon

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

   • Пример:

     icon: Icon(Icons.warning, color: Colors.red) // Иконка предупреждения

2. EdgeInsetsGeometry? iconPadding

   • Описание: Отступы вокруг значка.

   • Пример:

     iconPadding: EdgeInsets.all(16.0) // Отступы для иконки

3. Color? iconColor

   • Описание: Цвет значка.

   • Пример:

     iconColor: Colors.red // Цвет иконки

4. Widget? title

   • Описание: Заголовок диалогового окна. Может быть текстом или любым другим виджетом.

   • Пример:

     title: Text('Подтверждение') // Заголовок диалога

5. EdgeInsetsGeometry? titlePadding

   • Описание: Отступы вокруг заголовка.

   • Пример:

     titlePadding: EdgeInsets.all(16.0) // Отступы для заголовка

6. TextStyle? titleTextStyle

   • Описание: Стиль текста для заголовка.

   • Пример:

     titleTextStyle: TextStyle(fontWeight: FontWeight.bold) // Стиль текста заголовка

7. Widget? content

   • Описание: Основное содержание диалогового окна.

   • Пример:

     content: Text('Вы уверены, что хотите продолжить?') // Содержание диалога

8. EdgeInsetsGeometry? contentPadding

   • Описание: Отступы вокруг основного содержания.

   • Пример:

     contentPadding: EdgeInsets.all(16.0) // Отступы для содержания

9. TextStyle? contentTextStyle

   • Описание: Стиль текста для основного содержания.

   • Пример:

     contentTextStyle: TextStyle(color: Colors.black) // Стиль текста содержания

10. List<Widget>? actions

    • Описание: Список виджетов действий, обычно кнопок, которые пользователь может нажать.

    • Пример:

      actions: [
        TextButton(
          child: Text('Отмена'),
          onPressed: () {
            Navigator.of(context).pop(); // Закрывает диалог
          },
        ),
      ]

11. EdgeInsetsGeometry? actionsPadding

    • Описание: Отступы вокруг действий.

    • Пример:

      actionsPadding: EdgeInsets.symmetric(horizontal: 8.0) // Отступы для действий

12. MainAxisAlignment? actionsAlignment

    • Описание: Выравнивание действий в диалоговом окне.

    • Пример:

      actionsAlignment: MainAxisAlignment.end // Выравнивание действий по правому краю

13. OverflowBarAlignment? actionsOverflowAlignment

    • Описание: Выравнивание в случае переполнения действий.

    • Пример:

      actionsOverflowAlignment: OverflowBarAlignment.start // Выравнивание при переполнении

14. VerticalDirection? actionsOverflowDirection

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

    • Пример:

      actionsOverflowDirection: VerticalDirection.down // Направление вниз

15. double? actionsOverflowButtonSpacing

    • Описание: Пробел между кнопками действий при переполнении.

    • Пример:

      actionsOverflowButtonSpacing: 8.0 // Пробел между кнопками

16. EdgeInsetsGeometry? buttonPadding

    • Описание: Отступы для кнопок действий.

    • Пример:

      buttonPadding: EdgeInsets.all(8.0) // Отступы для кнопок

17. Color? backgroundColor

    • Описание: Цвет фона диалогового окна.

    • Пример:

      backgroundColor: Colors.white // Цвет фона

18. double? elevation

    • Описание: Высота тени диалогового окна.

    • Пример:

      elevation: 24.0 // Высота тени

19. Color? shadowColor

    • Описание: Цвет тени для диалогового окна.

    • Пример:

      shadowColor: Colors.black.withOpacity(0.5) // Цвет тени

20. Color? surfaceTintColor

    • Описание: Цвет наложения для поверхности.

    • Пример:

      surfaceTintColor: Colors.blue.withOpacity(0.1) // Цвет наложения

21. String? semanticLabel

    • Описание: Семантическая метка для вспомогательных технологий.

    • Пример:

      semanticLabel: 'Подтверждение действия' // Семантическая метка

22. EdgeInsets? insetPadding

    • Описание: Отступы вокруг диалогового окна.

    • Пример:

      insetPadding: EdgeInsets.all(20.0) // Отступы для окна

23. Clip? clipBehavior

    • Описание: Поведение обрезки для диалогового окна.

    • Пример:

      clipBehavior: Clip.antiAlias // Поведение обрезки

24. ShapeBorder? shape

    • Описание: Форма диалогового окна.

    • Пример:

      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)) // Форма с закругленными углами

25. AlignmentGeometry? alignment

    • Описание: Выравнивание диалогового окна на экране.

    • Пример:

      alignment: Alignment.center // Выравнивание по центру

26. bool scrollable = false

    • Описание: Указывает, должно ли диалоговое окно прокручиваться, если контента слишком много.

    • Пример:

      scrollable: true // Включить прокрутку

Заключение

AlertDialog — это мощный инструмент для взаимодействия с пользователем в Flutter. Используйте его, чтобы предоставлять важные сообщения или собирать данные от пользователей. Настройте его параметры в соответствии с вашими требованиями, чтобы улучшить пользовательский интерфейс вашего приложения.