🧩Dialog

Что такое Dialog

Dialog в Flutter — это модальное окно, которое может отображать информацию или запрашивать ввод от пользователя. Диалоги используются для взаимодействия с пользователем, например, для подтверждения действий, отображения ошибок или предоставления форм для ввода данных.

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

Вот пример, как создать и отобразить Dialog в вашем приложении:

import 'package:flutter/material.dart';

class DialogExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Dialog Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return Dialog(
                  backgroundColor: Colors.white,
                  elevation: 5,
                  child: Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text('Это диалоговое окно!'),
                        SizedBox(height: 20),
                        ElevatedButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text('Закрыть'),
                        ),
                      ],
                    ),
                  ),
                );
              },
            );
          },
          child: Text('Показать диалог'),
        ),
      ),
    );
  }
}

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

1. showDialog: Функция, которая отображает диалоговое окно.

2. builder: Возвращает виджет диалога. В этом случае это Dialog, который содержит текст и кнопку для закрытия.

3. Navigator.of(context).pop(): Закрывает диалог, когда пользователь нажимает кнопку.

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

1. Color? backgroundColor

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

   • Пример:

     backgroundColor: Colors.blue // Синий фон

2. double? elevation

   • Описание: Высота тени, создаваемой диалогом. Чем выше значение, тем более "плавающим" будет выглядеть диалог.

   • Пример:

     elevation: 10.0 // Высокая тень

3. Color? shadowColor

   • Описание: Цвет тени, создаваемой диалогом.

   • Пример:

     shadowColor: Colors.black54 // Полупрозрачная черная тень

4. Color? surfaceTintColor

   • Описание: Цвет наложения для фона, используемый в Material Design.

   • Пример:

     surfaceTintColor: Colors.blueAccent // Цвет наложения

5. Duration insetAnimationDuration

   • Описание: Длительность анимации при показе диалога.

   • Пример:

     insetAnimationDuration: Duration(milliseconds: 300) // 300 миллисекунд

6. Curve insetAnimationCurve

   • Описание: Кривая анимации при показе диалога.

   • Пример:

     insetAnimationCurve: Curves.easeInOut // Плавная анимация

7. EdgeInsets? insetPadding

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

   • Пример:

     insetPadding: EdgeInsets.all(20.0) // 20 пикселей отступа

8. Clip? clipBehavior

   • Описание: Поведение обрезки содержимого диалога (например, в случае, если оно выходит за пределы формы).

   • Пример:

     clipBehavior: Clip.hardEdge // Жесткая обрезка

9. ShapeBorder? shape

   • Описание: Форма диалога. Вы можете задать круглые углы или другие формы.

   • Пример:

     shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(15.0), // Круглые углы
     )

10. AlignmentGeometry? alignment

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

    • Пример:

      alignment: Alignment.center // Центрируем содержимое

11. Widget? child

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

    • Пример:

      child: Column(
        children: [
          Text('Заголовок'),
          // Другие виджеты
        ],
      ) // Содержимое диалога

Заключение

Dialog является важным элементом взаимодействия с пользователем в приложении Flutter. Он позволяет легко отображать информацию и запрашивать ввод, сохраняя при этом структуру интерфейса. Настройки Dialog позволяют кастомизировать его внешний вид и поведение в соответствии с вашими потребностями.