Flutter

Flutter. AlertDialog. Диалоговые окна

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

AlertDialog Constructor

const AlertDialog(
    {Key key,
    Widget title,
    Widget content,
    List<Widget> actions,
    ShapeBorder shape,
    double elevation,
    EdgeInsetsGeometry titlePadding,
    TextStyle titleTextStyle,
    EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
    TextStyle contentTextStyle,
    EdgeInsetsGeometry actionsPadding: EdgeInsets.zero,
    VerticalDirection actionsOverflowDirection,
    double actionsOverflowButtonSpacing,
    EdgeInsetsGeometry buttonPadding,
    Color backgroundColor,
    String semanticLabel,
    EdgeInsets insetPadding: _defaultInsetPadding,
    Clip clipBehavior: Clip.none,
    bool scrollable: false}
)

Acknowledgement popup AlertDialog.

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

Future simpleDialog(BuildContext context) {
  return showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Title'),
        content: Text('Dialog content'),
        actions: <Widget>[
          FlatButton(
            child: Text('Ok'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

Если для продолжения работы требуется подтверждение пользователя, может быть представлено одно действие.

AlertDialog example "Confirm Dialog"

Диалоги подтверждения требуют от пользователей подтверждения выбора, прежде чем диалог будет закрыт. Они представляют пользователям определенный выбор через их заголовок, содержание и действия. Действия в диалоге представлены в виде кнопок и позволяют пользователям подтвердить или отклонить что-либо.

Future confirmDialog(BuildContext context) async {
  return showDialog(
    context: context,
    barrierDismissible: false, // user must tap button for close dialog!
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Title'),
        content: Text('Content'),
        actions: <Widget>[
          FlatButton(
            child: Text('CANCEL'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          FlatButton(
            child: Text('ACCEPT'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          )
        ],
      );
    },
  );
}

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

AlertDialog example "Option dialog"

Future simpleDialogWithOption(BuildContext context) async {
  return await showDialog(
      context: context,
      barrierDismissible: true,
      builder: (BuildContext context) {
        return SimpleDialog(
          title: Text('Title'),
          children: <Widget>[
            SimpleDialogOption(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('First Option'),
            ),
            SimpleDialogOption(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Second Option'),
            ),
            SimpleDialogOption(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Other Option'),
            )
          ],
        );
      });
}

AlertDialog example "Input Dialog"

Future inputDialog(BuildContext context) async {
  String teamName = '';
  return showDialog(
    context: context,
    barrierDismissible: false, // dialog is dismissible with a tap on the barrier
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Title'),
        content: new Row(
          children: <Widget>[
            new Expanded(
                child: new TextField(
                  autofocus: true,
                  decoration: new InputDecoration(labelText: 'Lable text', hintText: 'hint'),
                  onChanged: (value) {
                    teamName = value;
                  },
                ))
          ],
        ),
        actions: <Widget>[
          FlatButton(
            child: Text('Ok'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

AlertDialog example "Loading Dialog"

import 'package:flutter/material.dart';

class LoginScreen extends StatelessWidget {

  final GlobalKey<State> keyLoader = GlobalKey<State>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(title: new Text("Test Progress Bar")),
        body: Center(
          child: new RaisedButton(
            child: Text("Progress Bar"),
            onPressed: () {
              Dialogs.showLoadingDialog(context, keyLoader);
            },
          ),
        ));
  }
}

class Dialogs {
  static Future showLoadingDialog(BuildContext context, GlobalKey key) async {
    return showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) {
          return new WillPopScope(
              onWillPop: () async => true,
              child: SimpleDialog(
                  key: key,
                  backgroundColor: Colors.white,
                  children: <Widget>[
                    Center(
                      child: Column(children: [
                        CircularProgressIndicator(),
                        SizedBox(
                          height: 10,
                        ),
                        Text(
                          "Please Wait....",
                          style: TextStyle(color: Colors.blueAccent),
                        )
                      ]),
                    )
                  ]));
        });
  }
}

Navigator.of(keyLoader.currentContext, rootNavigator: true).pop(); // disable progress

Full Screen Dialog example

void buildConfirmDialog(BuildContext context, String title, String subtitle, String textButton) {
  showDialog(
      context: context,
      builder: (context) {
        return Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              width: double.infinity,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(32.0),
                      topRight: Radius.circular(32.0))),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Material(
                        child: Text(title,
                            style: TextStyle(
                                fontSize: 14.0, color: Colors.black))),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Material(
                        child: Text(subtitle,
                            style: TextStyle(
                                fontSize: 14.0, color: Colors.black))),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Material(
                        child: Text(textButton,
                            style: TextStyle(
                                fontSize: 14.0, color: Colors.green))),
                  ),
                ],
              ),
            ));
      });
}
Меню