How to make an AlertDialog in Flutter? (AlertDialog class - material library - Dart API)

 A material design alert dialog.

An alert dialog informs the user about situations that require acknowledgement. An alert dialog has an optional title and an optional list of actions. The title is displayed above the content and the actions are displayed below the content.

Alert dialog With One Submit Button

                                  

showAlertDialog(BuildContext context) {
  Widget okbutton = TextButton(
    onPressed: () {},
    child: Text("Submit"),
  );
  AlertDialog alertDialog = AlertDialog(
    title: const Text("Alert Title"),
    content: const Text("Content of alert Title"),
    actions: [
      okbutton,
    ],
  );
  showDialog(
      context: context,
      builder: (BuildContext context) {
        return alertDialog;
      }
  );
}

2. Now Let us Create AlertDialog With Two Button

                

showAlertDialog(BuildContext context) {
  Widget okbutton = TextButton(
    onPressed: () {},
    child: Text("No"),
  );

  Widget cancelButton = TextButton(
    onPressed: () {},
    child: const Text("Yes"),
  );

  AlertDialog alertDialog = AlertDialog(
    title: const Text("Login Alert"),
    content: const Text("Are you sure you want to Continue"),
    actions: [
      okbutton,
      const SizedBox(width: 12,),
      cancelButton,
    ],
  );

  showDialog(
      context: context,
      builder: (BuildContext context) {
        return alertDialog;
      }
  );
}

2. Now Let us Create AlertDialog With Three Button

            

showAlertDialog(BuildContext context) {
  Widget okbutton = TextButton(
    onPressed: () {},
    child: Text("Cancel"),
  );

  Widget cancelButton = TextButton(
    onPressed: () {},
    child: const Text("Decline"),
  );
  
  Widget accept=TextButton(
      onPressed:(){},
      child: const Text("Accept"),
  )

  AlertDialog alertDialog = AlertDialog(
    title: const Text("Title"),
    content: const Text("Suporting Text"),
    actions: [
      okbutton,
      const SizedBox(width: 12,),
      cancelButton,
      const SizedBox(width: 12,),
      accept,
    ],
  );

  showDialog(
      context: context,
      builder: (BuildContext context) {
        return alertDialog;
      }
  );
}

            Handling button presses

The onPressed callback for the buttons in the examples above were empty, but you could add something like this:

Widget accept=TextButton(
    onPressed:(){
      Navigator.of(context).pop();// to hide the Dialog
      //your code here
    },
    child: const Text("Accept"),
);

If you make the callback null, then the button will be disabled.

Widget accept=const TextButton(
    onPressed:null,
    child: Text("Accept"),
);