How to use Flutter AlertDialog widget

An AlertDialog is a fundamental widget in Flutter that displays a dialog box typically used to notify users or prompt them for confirmation or input. It is a part of the Material Design package, which means it follows the standard Material Design guidelines and looks consistent with the rest of the UI elements in our Flutter app.

Constructor and parameters

The AlertDialog widget provides a constructor with various parameters to customize its behavior and layout.

const AlertDialog({
  Key? key,
  Widget? icon,
  EdgeInsetsGeometry? iconPadding,
  Color? iconColor,
  Widget? title,
  EdgeInsetsGeometry? titlePadding,
  TextStyle? titleTextStyle,
  Widget? content,
  EdgeInsetsGeometry? contentPadding,
  TextStyle? contentTextStyle,
  List<Widget>? actions,
  EdgeInsetsGeometry? actionsPadding,
  MainAxisAlignment? actionsAlignment,
  OverflowBarAlignment? 
  actionsOverflowAlignment,
  VerticalDirection? 
  actionsOverflowDirection,
  double? actionsOverflowButtonSpacing,
  EdgeInsetsGeometry? buttonPadding,
  Color? backgroundColor,
  double? elevation,
  Color? shadowColor,
  Color? surfaceTintColor,
  String? semanticLabel,
  EdgeInsets insetPadding = _defaultInsetPadding,
  Clip clipBehavior = Clip.none,
  ShapeBorder? shape,
  AlignmentGeometry? alignment,
  bool scrollable = false
})

Let's take a closer look at each parameter and its purpose:

  • key: An optional key that identifies this widget.

  • icon: An optional icon widget is displayed at the start of the dialog.

  • iconPadding: Optional padding around the icon.

  • iconColor: Optional color for the icon.

  • title: The widget is displayed as the dialog's title.

  • titlePadding: Optional padding around the title widget.

  • titleTextStyle: Optional text style for the title.

  • content: The widget is displayed as the main content of the dialog.

  • contentPadding: Optional padding around the content widget.

  • contentTextStyle: Optional text style for the content.

  • actions: A list of action buttons is displayed at the bottom of the dialog.

  • actionsPadding: Optional padding around the action buttons.

  • actionsAlignment: The alignment of the action buttons.

  • actionsOverflowAlignment: The alignment of overflowed actions.

  • actionsOverflowDirection: The direction of overflowed actions.

  • actionsOverflowButtonSpacing: The spacing between overflowed action buttons.

  • buttonPadding: Optional padding around the action buttons.

  • backgroundColor: The background color of the dialog.

  • elevation: The elevation of the dialog.

  • shadowColor: The shadow color of the dialog.

  • surfaceTintColor: The color for tinting the dialog's surface.

  • semanticLabel: The semantic label used for accessibility.

  • insetPadding: The padding between the edges of the screen and the dialog.

  • clipBehavior: The clipping behavior of the dialog.

  • shape: The shape of the dialog.

  • alignment: The alignment of the dialog within its container.

  • scrollable: Whether the content of the dialog can be scrolled if it overflows.

Implementation

We can follow the instructions given below to add a AlertDialog widget in UI:

Import the necessary packages

To use the AlertDialog widget, we need to import the flutter/material.dart package into our Dart file.

import 'package:flutter/material.dart';

Adding simple AlertDialog

To display an AlertDialog, we need to wrap our code in a function and call that function when we want to show the dialog. Here's a simple example of how to show an AlertDialog:

ElevatedButton(
  onPressed: () => showDialog<String>(
    context: context,
    builder: (BuildContext context) => AlertDialog(
      title: const Text('Educative Alert'),
      content: const Text('Here we can add the description of the alert'),
      actions: <Widget>[
        TextButton(
          onPressed: () => Navigator.pop(context, 'Cancel'),
          child: const Text('Cancel'),
        ),
        TextButton(
          onPressed: () => Navigator.pop(context, 'OK'),
          child: const Text('OK'),
        ),
      ],
    ),
  ),
  child: const Text('Show Dialog'),
);

Code explanation

  1. Line 2: Sets the onPressed property to an anonymous function using a lambda expression. This function triggers the display of the AlertDialog when the button is pressed.

  2. Line 4: The builder parameter for the showDialog function, which defines a function that returns the AlertDialog widget.

  3. Line 5: The title property of the AlertDialog widget is set to a Text widget with the title "Educative Alert".

  4. Line 6: The content property of the AlertDialog widget is set to a Text widget with the content "Here we can add the description of the alert".

  5. Line 7: The actions property of the AlertDialog widget defines a list of widgets for action buttons.

  6. Lines 8–11: This creates a TextButton widget for the first action button (Cancel) with onPressed property that calls Navigator.pop to close the AlertDialog.

  7. Lines 12–15: This creates a TextButton widget for the second action button (OK) with onPressed property that calls Navigator.pop to close the AlertDialog.

Output

After running the above code, we can see the following output:

Simple alert dialog
Simple alert dialog

Customizable AlertDialog

It comes with various customization options to tailor the appearance and behavior of the dialog. Below is an example of how to use the AlertDialog widget with custom title, content, and actions:

ElevatedButton(
  onPressed: () => showDialog<String>(
    context: context,
    builder: (BuildContext context) => AlertDialog(
      title: Container(
        width: 250,
        height: 50,
        padding: EdgeInsets.all(5),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.blue,
        ),
        // color: Colors.yellow,
        child: Row(
          children: [
            Icon(Icons.info, size: 40, color: Colors.red),
            SizedBox(width: 8),
            Text(
              'Educative Alert',
              style: TextStyle(fontSize: 18, color: Colors.red),
            ),
          ],
        ),
      ),
      content: const Text('Here we can add the description of the alert'),
      actions: <Widget>[
        TextButton(
          onPressed: () => Navigator.pop(context, 'Cancel'),
          child: const Text('Cancel'),
        ),
        TextButton(
          onPressed: () => Navigator.pop(context, 'OK'),
          child: const Text('OK'),
        ),
      ],
    ),
  ),
  child: const Text('Show Dialog'),
);

Code explanation

In the above code snippet, we have customized the title section of the AlertDialog by replacing the default title with a custom widget.

  • Lines 5–24: The Container allows us to create a custom title with a specific width, height, padding, and decoration.

  • Lines 9–12: The decoration property sets a rounded rectangular border with a blue background color for the custom title.

  • Lines 14–23: Inside the Container, we use a Row widget to arrange the icon and text side by side.

  • Line 16: The Icon widget displays an "info" icon with red color and size 40.

  • Line 17: We add a SizedBox with a width of 8 to create spacing between the icon and the text.

  • Lines 18–21: The Text widget displays the title text "Educative Alert" with a font size of 18 and red color.

Output

After running the above code, we can see the following output:

Alert dialog box with customized title
Alert dialog box with customized title

Code example

We get the following output by putting together the code explained above.

import 'package:flutter/material.dart';

/// Flutter code sample for [AlertDialog].

void main() => runApp(AlertDialogExampleApp());

class AlertDialogExampleApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Educativer Alert Answer')),
        body: Center(
          child: DialogExample(),
        ),
      ),
    );
  }
}

class DialogExample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => showDialog<String>(
        context: context,
        builder: (BuildContext context) => AlertDialog(
          title: Container(
            width: 250,
            height: 50,
            padding: EdgeInsets.all(5),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.blue,
            ),
            // color: Colors.yellow,
            child: Row(
              children: [
                Icon(Icons.info, size: 40, color: Colors.red),
                SizedBox(width: 8),
                Text(
                  'Educative Alert',
                  style: TextStyle(fontSize: 18, color: Colors.red),
                ),
              ],
            ),
          ),
          content: const Text('Here we can add the description of the alert'),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context, 'Cancel'),
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context, 'OK'),
              child: const Text('OK'),
            ),
          ],
        ),
      ),
      child: const Text('Show Dialog'),
    );
  }
}

Conclusion

The Flutter AlertDialog widget provides a versatile and easy-to-use solution for displaying dialog boxes in our app, Whether we need to notify users, gather input, or present important information. By utilizing the flexibility and customization capabilities of the AlertDialog, we can create engaging and intuitive dialogs to display on our app.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved