Skip to content
Related Articles

Related Articles

Improve Article

Flutter – Dialogs

  • Last Updated : 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.

Types of dialogs in a flutter

  • AlertDialog
  • SimpleDialog
  • showDialog

AlertDialog:

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.

Properties:

  • 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.

Constructor:

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

Alert dialog 

SimpleDialog:

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.

Properties:

  • 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.

Constructor:

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

SimpleDialog

showDialog:

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.

Properties:

  • 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.

Constructor

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

Key Difference:

AlertDialog

  • 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.

SimpleDialog

  • 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.

ShowDialog

  • 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.
Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :