Flutter - Dialogs - GeeksforGeeks

15 Feb, 2021
The dialog is a type of widget which comes on the window or the screen which contains any critical information or can ask for any decision. When a dialog box is popped up the all the other functions get disabled until you close the dialog box or provide an answer. We use a dialog box for a different type of condition such as alert notification, simple notification in which different options are shown, or we can also make a dialog box which can be used as a tab for showing the dialog box.
AlertDialog
SimpleDialog
showDialog
Alert dialog tells the user about any condition that requires any recognition. The alert dialog contains an optional title and an optional list of actions.  We have different no of actions as our requirements. Sometimes the content is too large as compared to the screen size so for resolving this problem we may have to use the expanded class.
Title: It is always recommended to make our dialog title as short as possible. It will be easily understandable to the user.
Action: It is used to show the content for what action has to perform.
Content: The body of the alertDialog widget is defined by the content.
Shape: It is used to define the shape of our dialog box whether it is circular, curve, and many more.
AlertDialog(
            {
                   Key key,
                   Widget title,
                   EdgeInsetsGeometry titlePadding,
                   TextStyle titleTextStyle,
                   Widget content,
                   EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
                   TextStyle contentTextStyle,
                   List<Widget> actions,
                   EdgeInsetsGeometry actionsPadding: EdgeInsets.zero,
                   VerticalDirection actionsOverflowDirection,
                   double actionsOverflowButtonSpacing,
                   EdgeInsetsGeometry buttonPadding,
                   Color backgroundColor,
                   double elevation,
                   String semanticLabel,
                   EdgeInsets insetPadding: _defaultInsetPadding,
                   Clip clipBehavior: Clip.none,
                   ShapeBorder shape,
                   bool scrollable: false
            }
)


Here is the snippet code for creating a dialog box.
Dart
AlertDialog(              title: Text('Welcome'),  // To display the title it is optional              content: Text('GeeksforGeeks'),   // Message which will be pop up on the screen              // Action widget which will provide the user to acknowledge the choice                actions: [                FlatButton(           // FlatButton widget is used to make a text to work like a button                  textColor: Colors.black,                  onPressed: () {},        // function used to perform after pressing the button                  child: Text('CANCEL'),                ),                FlatButton(                  textColor: Colors.black,                  onPressed: () {},                  child: Text('ACCEPT'),                ),              ],            ),
Output:
Alert dialog 
A simple dialog allows the user to choose from different choices. It contains the title which is optional and presents above the choices. We can show options by using the padding also. Padding is used to make a widget more flexible.
Title: It is always recommended to make our dialog title as short as possible. It will be easily understandable to the user.
Shape: It is used to define the shape of our dialog box whether it is circular, curve, and many more.
backgroundcolor: It is used to set the background color of our dialog box.
TextStyle: It is used to change the style of our text.
const SimpleDialog(
     {
               Key key,
               Widget title,
               EdgeInsetsGeometry titlePadding: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
               TextStyle titleTextStyle,
               List<Widget> children,
               EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),
               Color backgroundColor,
               double elevation,
               String semanticLabel,
               ShapeBorder shape
     }
)

Here is the snippet code for Simple dialog
Dart
SimpleDialog(                        title:const Text('GeeksforGeeks'),                        children: <Widget>[                          SimpleDialogOption(                            onPressed: () { },                            child:const Text('Option 1'),                            ),                          SimpleDialogOption(                            onPressed: () { },                            child: const Text('Option 2'),                          ),                        ],                      ),
Output:
SimpleDialog
It basically used to change the current screen of our app to show the dialog popup. You must call before the dialog popup. It exits the current animation and presents a new screen animation. We use this dialog box when we want to show a tab which will popup any type of dialog box, or we create a front tab to show the background process.
Builder: It returns the child instead of creating a child argument.
Barriercolor: It defines the modal barrier color which darkens everything in the dialog.
useSafeArea: It makes sure that the dialog uses the safe area of the screen only nor overlapping the screen area.
Future<T> showDialog <T>(
    {
           @required BuildContext context,
           WidgetBuilder builder,
           bool barrierDismissible: true,
           Color barrierColor,
           bool useSafeArea: true,
           bool useRootNavigator: true,
           RouteSettings routeSettings,
          @Deprecated(It returns the child from the closure provided to the builder class ) Widget child
     }
)

Here is the snippet for the showDialog function.
Dart
showDialog(                  context: context,                  builder: (BuildContext context) {                    return Expanded(                      child: AlertDialog(                        title: Text('Welcome'),                        content: Text('GeeksforGeeks'),                        actions: [                          FlatButton(                            textColor: Colors.black,                            onPressed: () {},                            child: Text('CANCEL'),                          ),                          FlatButton(                            textColor: Colors.black,                            onPressed: () {},                            child: Text('ACCEPT'),                          ),                        ],                      ),                      );                  },                );
Used to show any type of alert notification.
We can give the option to react for the alert popup like the accept button or reject button.
Used to show simple option as a dialog box.
There are different options to choose and perform functions according to it. The option can be simple like choosing between different emails.
Used to create an option that will popup a dialog box.
By using this we can popup different types of dialog boxes like alertDialog, SimpleDialog as a sub widget.
android
Flutter
Flutter UI-components
Flutter-widgets
Picked
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Asset Image
Flutter - Custom Bottom Navigation Bar
Splash Screen in Flutter
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - BoxShadow Widget
Flutter - Flexible Widget