🧩SimpleDialog

Что такое SimpleDialog

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

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

Вот пример использования SimpleDialog в приложении Flutter:

import 'package:flutter/material.dart';

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

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

  void _showDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return SimpleDialog(
          title: const Text('Выберите вариант'),
          children: <Widget>[
            SimpleDialogOption(
              onPressed: () {
                Navigator.pop(context, 'Опция 1');
              },
              child: const Text('Опция 1'),
            ),
            SimpleDialogOption(
              onPressed: () {
                Navigator.pop(context, 'Опция 2');
              },
              child: const Text('Опция 2'),
            ),
            SimpleDialogOption(
              onPressed: () {
                Navigator.pop(context, 'Опция 3');
              },
              child: const Text('Опция 3'),
            ),
          ],
        );
      },
    );
  }
}

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

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

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

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

  4. children: Список виджетов, представляющий варианты выбора. Каждый вариант представлен как SimpleDialogOption.

  5. SimpleDialogOption: Виджет, который определяет отдельный вариант выбора.

  6. Navigator.pop(context, 'Опция 1'): Метод, который закрывает диалог и возвращает выбранное значение.

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

  1. Widget? title

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

    • Пример:

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

  2. EdgeInsetsGeometry titlePadding

    • Описание: Отступы вокруг заголовка. По умолчанию установлены на EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0).

    • Пример:

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

  3. TextStyle? titleTextStyle

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

    • Пример:

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

  4. List<Widget>? children

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

    • Пример:

      children: [
  SimpleDialogOption(
    onPressed: () {
      Navigator.pop(context, 'Опция 1');
    },
    child: Text('Опция 1'),
  ),
]

  5. EdgeInsetsGeometry contentPadding

    • Описание: Отступы вокруг содержимого диалогового окна. По умолчанию установлены на EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0).

    • Пример:

      contentPadding: EdgeInsets.all(10.0) // Отступы для содержимого

  6. Color? backgroundColor

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

    • Пример:

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

  7. double? elevation

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

    • Пример:

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

  8. Color? shadowColor

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

    • Пример:

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

  9. Color? surfaceTintColor

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

    • Пример:

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

  10. String? semanticLabel

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

    • Пример:

      semanticLabel: 'Выбор варианта' // Семантическая метка

  11. EdgeInsets? insetPadding

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

    • Пример:

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

  12. Clip? clipBehavior

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

    • Пример:

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

  13. ShapeBorder? shape

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

    • Пример:

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

  14. AlignmentGeometry? alignment

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

    • Пример:

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

Заключение

SimpleDialog — это полезный инструмент для отображения выбора или простой информации пользователю. Его настройки позволяют гибко настроить внешний вид и поведение диалогового окна. Используйте его для улучшения пользовательского опыта в вашем приложении.

PreviousAlertDialogNextBottomSheet

Last updated