How to make an AlertDialog in Flutter?

alert_dialog_in_flutter

Hi, In this Flutter tutorial we can discuss how to make an AlertDialog in a flutter. Alert Dialog is basically used in a case where you can prompt an alert to a user about something wrong.  Like at Login time to show login details Wrong, App any form submissions user can see if any required field not fill.

In the Flutter Alert Dialog, we can use it to show a message to the user. This tutorial let me different dialog with buttons.

Custom AlertDialog flutter with Ok Button.

showAlertDialog(BuildContext context) {

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

  // set up the AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("Massage"),
    content: Text("Your Request submitted successfully"),
    actions: [
      okButton,
    ],
  );

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

Flutter AlertDialog with  Ok and Cancel button.

here I am creating an Alert Dialog with two buttons ok and cancel. You can use Ok for call requests and cancel to dismiss the request.

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("Massage"),
    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;
    },
  );
}

Flutter Dialog Example With Three-button.

showAlertDialog(BuildContext context) {

  // set up the buttons
  Widget remindButton = FlatButton(
    child: Text("Later"),
    onPressed:  () {},
  );
  Widget cancelButton = FlatButton(
    child: Text("Cancel"),
    onPressed:  () {},
  );
  Widget launchButton = FlatButton(
    child: Text("Rate us"),
    onPressed:  () {},
  );

  // set up the AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("Massage"),
    content: Text("Do you want to rate this flutter tutorial?"),
    actions: [
      remindButton,
      cancelButton,
      launchButton,
    ],
  );

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

Get Full Source Code Project on Github

Facebooktwitterredditpinterestlinkedinmail
Recommended
Hi, Flutter developers in this fluter article we learn how…