Flutter

Flutter AlertDialog – це невеликий віджет, який використовується для прийняття рішення або введення інформації. Він не заповнює весь екран. Зазвичай він використовується для подій, які вимагають від користувачів дій, перш ніж вони зможуть продовжити.

посилання на офіційний ресурс

посилання на додатковий ресурс

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}
)

Спливаюче діалогове вікно інформує користувача про ситуації, що вимагають підтвердження. Воно має необов’язкову дію.

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();
            },
          ),
        ],
      );
    },
  );
}

Якщо для продовження роботи потрібно підтвердження користувача, може бути представлено одну дію.

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

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();
            },
          )
        ],
      );
    },
  );
}

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

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'),
            )
          ],
        );
      });
}

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();
            },
          ),
        ],
      );
    },
  );
}

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

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))),
                  ),
                ],
              ),
            ));
      });
}