How to Show Dialog in Flutter App

In this example, we are going to show you the easiest way to show different kinds of dialog in Flutter Apps such as Material Alert Dialog for Android, Web, and Desktop, or Cupertino for iOS platforms. See the example below:

How to Show Material Alert Dialog in Flutter for Android:

Import material package in your script.

import 'package:flutter/material.dart';

showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text('Material Alert Dialog'),
        content: Text('Do you really want to delete?'),
        actions: <Widget>[
          TextButton(
              onPressed: () {
                    //action code for "Yes" button
              },
              child: Text('Yes')),
          TextButton(
            onPressed: () {
                Navigator.pop(context); //close Dialog
            },
            child: Text('Close'),
          )
        ],
      );
    });

Output:

How to Show Cupertino Alert Dialog for iOS platform:

Import Cupertino package in script:

import 'package:flutter/cupertino.dart';

showDialog(
    context: context,
    builder: (context) {
      return CupertinoAlertDialog(
        title: Text('Cupertino Alert Dialog'),
        content: Text('Do you really want to delete?'),
        actions: <Widget>[
          TextButton(
              onPressed: () {
                    //action code for "Yes" button
              },
              child: Text('Yes')),
          TextButton(
            onPressed: () {
                Navigator.pop(context); //close Dialog
            },
            child: Text('Close'),
          )
        ],
      );
    });

Output:

How to show Simple Dialog:

showDialog(
  context: context,
  builder: (context) {
    return SimpleDialog(
      title: Text('Simple Dialog'),
      children: <Widget>[
          SimpleDialogOption(
            onPressed: () {
              
            },
            child: const Text('Task 1'),
          ),
          SimpleDialogOption(
            onPressed: () {
              
            },
            child: const Text('Task 2'),
          ),
          SimpleDialogOption(
            onPressed: () {
                Navigator.pop(context);
            },
            child: const Text('Close'),
          ),
          
        ],
    );  
  }
);

Output:

How to Close Dialog:

Navigator.pop(context); //close Dialog

Full Code Example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

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

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
     return Scaffold(
          appBar: AppBar(
             title: Text("Show Dialog in Flutter"),
          ),
          body: Container( 
            alignment: Alignment.topCenter,
            padding: EdgeInsets.all(20),
            child: Column(
                children:[

                    ElevatedButton(
                      child: Text("Show Material Alert Dialog"),
                      onPressed: (){
                        showDialog(
                            context: context,
                            builder: (context) {
                              return AlertDialog(
                                title: Text('Material Alert Dialog'),
                                content: Text('Do you really want to delete?'),
                                actions: <Widget>[
                                  TextButton(
                                      onPressed: () {
                                           //action code for "Yes" button
                                      },
                                      child: Text('Yes')),
                                  TextButton(
                                    onPressed: () {
                                       Navigator.pop(context); //close Dialog
                                    },
                                    child: Text('Close'),
                                  )
                                ],
                              );
                            });
                       }
                    ),

                    ElevatedButton(
                      child: Text("Show Cupertino Alert Dialog"),
                      onPressed: (){
                        showDialog(
                            context: context,
                            builder: (context) {
                              return CupertinoAlertDialog(
                                title: Text('Cupertino Alert Dialog'),
                                content: Text('Do you really want to delete?'),
                                actions: <Widget>[
                                  TextButton(
                                      onPressed: () {
                                           //action code for "Yes" button
                                      },
                                      child: Text('Yes')),
                                  TextButton(
                                    onPressed: () {
                                       Navigator.pop(context); //close Dialog
                                    },
                                    child: Text('Close'),
                                  )
                                ],
                              );
                            });
                       }
                    ),


                    ElevatedButton(
                      child: Text("Show Simple  Dialog"),
                      onPressed: (){
                        showDialog(
                            context: context,
                            builder: (context) {
                              return SimpleDialog(
                                title: Text('Simple Dialog'),
                                children: <Widget>[
                                    SimpleDialogOption(
                                      onPressed: () {
                                        
                                      },
                                      child: const Text('Task 1'),
                                    ),
                                    SimpleDialogOption(
                                      onPressed: () {
                                        
                                      },
                                      child: const Text('Task 2'),
                                    ),
                                    SimpleDialogOption(
                                      onPressed: () {
                                         Navigator.pop(context);
                                      },
                                      child: const Text('Close'),
                                    ),
                                    
                                  ],
                              );
                        });
                       }
                    )

                ]
            ),
          ),
     );
  }
}

Output Screenshot:

In this way, you can show Material Alert Dialog, Cupertino Alert Dialog and Simple Dialog in Flutter.