Flutter AlertDialog Explained with Code Examples(2024 Guide)

 showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
              title: pass a widget,
              content: pass a widget,
              actions: [ can use multiple widgets ],
              );
      },
    );

1. Here you can see that we have to use the Flutter showDialog and in its builder function, we’ve to return this Flutter AlertDialog.
2. The most used and important parameters in alert dialog are title, content, and actions.
3. The title and content takes a Flutter widget while the actions takes a list of Flutter widgets.

Parameters

Listed below are the parameters of alert dialog.

1. title
2. titleTextStyle
3. content
4. contentPadding
5. actions
6. inSetPadding
7. actionsAlignment

Code Examples to Explain Parameters of Alert Dialog

Example 1: title parameter

TextButton.icon(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(title: Text('I am a Title'));
              },
            );
          },
          label: Text(
            'Show Alert Box',
            style: TextStyle(color: Colors.black.withOpacity(.9)),
          ),
          icon: Icon(
            Icons.show_chart,
            color: Colors.blue.shade700,
          ),
        )

• Here, I created a simple text button with icon widget and by tapping on it the alert dialog will show.
• Its title parameter takes a widget so I passed it a Flutter text widget. You can pass any widget you want.

Example 2: titleTextStyle parameter

 titleTextStyle: TextStyle(
                    color: Colors.blue.shade700,
                    fontSize: 21,
                    fontWeight: FontWeight.bold)

1. The title text style parameter of alert dialog is used to decorate the title.
2. It takes TextStyle() class.
3. For demonstration, I changed its color, size of text and made the text bold. You can play with other parameters of text style as well.

Example 3: content parameter

content: Container(
    padding: EdgeInsets.all(11),
    decoration: BoxDecoration(
    border: Border.all(color: Colors.grey),
    borderRadius: BorderRadius.circular(11)),
    child:
       Text('I am the content. You can pass any widget here'),
                  )

• The content parameter of Flutter alert dialog also takes a Flutter widget.
• For demonstration, I passed it a Flutter container widget.
• I also decorate the container by specifying its border color, border radius, and gave it a child text widget which can be seen in the above image.

Example 4: contentPadding

contentPadding: EdgeInsets.symmetric(
                 horizontal: 3,
                 vertical: 41,
                  )

This parameter is used to give padding, or you can say spacing to the alert dialog’s content. To explain it, I gave it a small horizontal padding but larger vertical padding. In the above image, you can see that the space between content and the horizontal edges of alert dialog is less while the vertical(top and bottom) space is big.

You can try other method of edge in sets as well like only(), symmetric(), etc. to set the specific space you want.

Example 5: actions parameter

 actions: [
    TextButton.icon(
      onPressed: () {
         Navigator.of(context).pop();
                    },
      label: Text('Done'),
         icon: Icon(Icons.done),
              )
          ]

• The actions parameter takes a list of Flutter widgets.
• To explain it practically, I passed it a text button with icon widget. When the users taps it, it’ll close the alert dialog.

 Example 6: inSetPadding parameter

   insetPadding: EdgeInsets.symmetric(horizontal: 91)

   insetPadding: EdgeInsets.symmetric(horizontal: 0)

1. This parameter is used to set the space between the dialog and the screen edges.
2. In the first example, I passed it a horizontal padding and you can see that the dialog width decreases.
3. In the second example, I passed it a 0 horizontal padding and the Flutter alertDialog width increases.
4. You can play with other methods of EdgeInSets as well like all(), symmetric(), only(), etc.

 actionsAlignment: MainAxisAlignment.center

 actionsAlignment: MainAxisAlignment.start

1. This parameter is used to set the position of actions widgets. By default, we see them in the end/right position.
2. It takes main axis alignment, so in the first example, I passed it the property center and we can see that the widget in actions now shows in center.
3. In the second example, I used the start property which positions/aligns the actions widget to the left side of Flutter alert dialog.

You can use multiple widgets in actions and use other properties of MainAxisAlignment as well. Some of these are: