Flutter

Flutter AlertDialog is a small widget that is used to make a decision or enter information. It does not fill the entire screen. It is usually used for events that require users to take action before they can continue.

link to the official resource

link to additional resource

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

A pop-up dialog box informs the user about situations that require confirmation. It has an optional action.

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

If user confirmation is required to continue, one action can be presented.

Confirmation dialogs require users to confirm choices before the dialog is closed. They present users with specific choices through their title, content, and actions. Actions in the dialog are represented as buttons and allow users to confirm or reject something.

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

Confirmation dialogs give users a final confirmation before committing so that they have a chance to change their mind if necessary.

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