How to make an AlertDialog in Flutter?

Hello Guys How are you all? hope you all are fine. Today we are going to learn How to make an AlertDialog in Flutter? in this tutorial. So without wasting your time let’s start this tutorial.

How to make an AlertDialog in Flutter?

You can use AlertDialog to notify a user about information or warning and allow the user to take an action. You can also use it to get input from users, like letting users choose from options, or providing text input.

Step 1. Create Button

First of all, we need to create a button when you press this button alertDialog will open. So let me create a button first we will use RaisedButton here.

        child: RaisedButton(
          child: Text('Alert Dialog'),
          onPressed: () {
            // on press stuff here
          },
        ),

Step 2. Make showDialog Method

Now we are going to make a method that will show dialogue. I am creating my mothed name showDialogBox and the widget we will use is showDialog Here is an example.

void showDialogBox(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: new Text("Alert Dialog!!"),
        content: new Text("You are awesome!"),
        actions: <Widget>[
          new FlatButton(
            child: new Text("OK"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

Step 3. call showDialog Method to Button

Now we are going to use showDialogBox method with button on press. and also pass context there.

        child: RaisedButton(
          child: Text('Alert Dialog'),
          onPressed: () {
            showDialogBox(context);
          },
        ),

Step 4. Customize AlertDialog

One Button AlertDialog

Lets suppose we need to make One Button AlertDialog. Here is example.

showAlertDialog(BuildContext context) {

  // set up the button
  Widget okButton = FlatButton(
    child: Text("OK"),
    onPressed: () { },
  );

  // set up the AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("My title"),
    content: Text("This is my message."),
    actions: [
      okButton,
    ],
  );

  // show the dialog
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

Two Buttons AlertDialog

Lets suppose we need to make Two Buttons AlertDialog. Here is example.

showAlertDialog(BuildContext context) {

  // set up the buttons
  Widget cancelButton = FlatButton(
    child: Text("Cancel"),
    onPressed:  () {},
  );
  Widget continueButton = FlatButton(
    child: Text("Continue"),
    onPressed:  () {},
  );

  // set up the AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("AlertDialog"),
    content: Text("Would you like to continue learning how to use Flutter alerts?"),
    actions: [
      cancelButton,
      continueButton,
    ],
  );

  // show the dialog
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

Three Buttons AlertDialog

Lets suppose we need to make Three Buttons AlertDialog. Here is example.

showAlertDialog(BuildContext context) {

  // set up the buttons
  Widget remindButton = FlatButton(
    child: Text("Remind me later"),
    onPressed:  () {},
  );
  Widget cancelButton = FlatButton(
    child: Text("Cancel"),
    onPressed:  () {},
  );
  Widget launchButton = FlatButton(
    child: Text("Launch missile"),
    onPressed:  () {},
  );

  // set up the AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("Notice"),
    content: Text("Launching this missile will destroy the entire universe. Is this what you intended to do?"),
    actions: [
      remindButton,
      cancelButton,
      launchButton,
    ],
  );

  // show the dialog
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

Step 5. Full Source Code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart ';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:fluttercorner_app/SecondScreen.dart';

void main() {
  runApp(new MaterialApp(
    home: MyApp(),
    debugShowCheckedModeBanner: false,
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('AlertDialog - FlutterCorner'),
      ),
      body: Container(
        padding: const EdgeInsets.all(20),
        child: Center(
          child: RaisedButton(
            child: Text('Alert Dialog'),
            onPressed: () {
              showDialogBox(context);
            },
          ),
        ),
      ),
    );
  }

  void showDialogBox(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: new Text("Alert Dialog!!"),
          content: new Text("You are awesome!"),
          actions: <Widget>[
            new FlatButton(
              child: new Text("OK"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
}

Step 6. Output as Image

Faq

Summery

So, It’s All About How to make an AlertDialog in Flutter?. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

• IN Flutter Web getting ‘XMLHttpRequest’ error while making HTTP call
• The getter ‘value’ was called on null flutter
• Duplicate GlobalKey detected in widget tree
• Android Studio Emulator: cannot add library vulkan-1.dll: failed
• Invalid depfile: Flutter