🧩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. Используйте его, чтобы предоставлять важные сообщения или собирать данные от пользователей. Настройте его параметры в соответствии с вашими требованиями, чтобы улучшить пользовательский интерфейс вашего приложения.

PreviousДиалоги и всплывающие окнаNextSimpleDialog

Last updated