How to Show Material/Cupertino 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:

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:

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:

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:

Navigator.pop(context); //close Dialog

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'),
                                    ),
                                    
                                  ],
                              );
                        });
                       }
                    )

                ]
            ),
          ),
     );
  }
}

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

No any Comments on this Article


Please Wait...