How to Insert Alertdialog in Flutter?

In this tutorial, we will insert AlertDialog in Flutter applications, providing users with informative pop-ups and prompts for better user experience and interaction.

This guide provides two full code examples with a basic alert box and a form alert box.

Let’s go…

Table of Contents

• Example 1: Insert Alertdialog in Flutter – Full Code
• Example 2: Insert Alertdialog in Flutter – Full Code
• Conclusion

Example 1: Insert Alertdialog in Flutter – Full Code

To insert an AlertDialog in Flutter, you can use the showDialog function from the flutter/material.dart library. Here’s an example of how you can do it:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AlertDialog Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Text('Alert Dialog'),
                  content: Text('This is an example of an AlertDialog'),
                  actions: [
                    TextButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text('Close'),
                    ),
                  ],
                );
              },
            );
          },
          child: Text('Show Alert Dialog'),
        ),
      ),
    );
  }
}

In the above example:

1. We create a MaterialApp with a HomePage widget.
2. Inside the HomePage widget, we have an ElevatedButton.
3. When the ElevatedButton is pressed, the showDialog function is called with the context and a builder function.
4. The builder function returns an AlertDialog widget, which is a pre-built dialog box provided by Flutter.
5. The AlertDialog widget has a title, content, and actions property.
6. The actions property is a list of widgets that represent the actions (buttons) inside the dialog.
7. In this example, we have a single TextButton with the text “Close” that dismisses the dialog when pressed.

When you run this code, you’ll see an “Alert Dialog” button on the screen. Tapping the button will display an AlertDialog with the text “This is an example of an AlertDialog” and a “Close” button.

Output

Check Out:

• How to Create Custom Cards in Flutter?
• How to Convert Int to Double in Flutter?
• How to Center Title in Appbar in Flutter?
• How to Show Custom Toast Messages in Flutter?

Example 2: Insert Alertdialog in Flutter – Full Code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _name = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AlertDialog Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Text('Enter Your Name'),
                  content: TextField(
                    onChanged: (value) {
                      setState(() {
                        _name = value;
                      });
                    },
                    decoration: InputDecoration(
                      hintText: 'Enter your name',
                    ),
                  ),
                  actions: [
                    TextButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text('Cancel'),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                        showDialog(
                          context: context,
                          builder: (BuildContext context) {
                            return AlertDialog(
                              title: Text('Welcome'),
                              content: Text('Hello, $_name!'),
                              actions: [
                                TextButton(
                                  onPressed: () {
                                    Navigator.of(context).pop();
                                  },
                                  child: Text('OK'),
                                ),
                              ],
                            );
                          },
                        );
                      },
                      child: Text('Submit'),
                    ),
                  ],
                );
              },
            );
          },
          child: Text('Show AlertDialog'),
        ),
      ),
    );
  }
}

In this example:

1. We have a StatefulWidget called MyHomePage that maintains the state of the user’s name.
2. When the “Show AlertDialog” button is pressed, it displays an AlertDialog with a TextField for the user to enter their name.
3. The TextField updates the _name state variable whenever the text changes.
4. The AlertDialog has two buttons: “Cancel” and “Submit”.
5. If the user clicks “Cancel”, the dialog is dismissed.
6. If the user clicks “Submit”, another AlertDialog is displayed with the message “Hello, [user’s name]!” and an “OK” button.
7. The second dialog is dismissed when the “OK” button is pressed.

This example demonstrates how you can use an AlertDialog to collect user input (in this case, a name) and then display another AlertDialog based on that input.

Output

Conclusion

You can customize the AlertDialog further by adding more actions, changing the title, and content, or even adding additional widgets (like TextFields) inside the content section.

If you haven’t already installed Flutter, you can follow the official: Flutter Installation Guide. to set it up.