🧩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 позволяют кастомизировать его внешний вид и поведение в соответствии с вашими потребностями.

PreviousTooltipNextНавигация

Last updated