Flutter на практике (AlertDialog and SimpleDialog)

Андрей Кейда · 30.08.2019
Статья написана для старой версии Flutter и сейчас обновляется. Часть кода может не компилироваться на актуальной версии.

AlertDialog

  • AlertDialog - это виджет (диалоговое окно оповещения) информирует пользователя о чем либо и требует подтверждения. AlertDialig имеет необязательный заголовок и необязательное содержимое. Заголовок отображается над содержимым, а действия (например кнопка 'Ok') отображаются под содержимым.

Пример:

pic
pic

Из примера следует, что после нажатия кнопки "info" всплывает диалог с информацией и требует подтверждения.

  • Как это сделать: Во-первых, необходимо вызвать функцию showDialog() , которая изменяет состояние приложения, чтобы показать диалог. Вы должны предоставить функции showDialog(), context и функцию builder . Эта функция должна возвращать объект типа диалога. Пример: 
return showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('© 2019 Flutter.su, по всем вопросам пишите ...'),
        content: const Text(''),
        actions: [
          FlatButton(
            child: Text('Ok'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );

SimpleDialog

  • предлагает пользователю выбор между несколькими вариантами. SimpleDialog имеет необязательный заголовок, который отображается над вариантами. Пример:
pic
pic

Пример кода: 

void _showSimpleDialog() {
    showDialog(
        context: context,
        builder: (context) {
          return SimpleDialog(
            title: Text('Chosse an Option'),
            children: [
              SimpleDialogOption(
                onPressed: () {
                  _dismissDialog();
                },
                child: const Text('Option 1'),
              ),
              SimpleDialogOption(
                onPressed: () {
                  _dismissDialog();
                },
                child: const Text('Option 2'),
              ),
              SimpleDialogOption(
                onPressed: () {
                  _dismissDialog();
                },
                child: const Text('Option 3'),
              ),
              SimpleDialogOption(
                onPressed: () {
                  _dismissDialog();
                },
                child: const Text('Option 4'),
              ),
            ],
          );
        });
  }