Flutter dialog

Dialog is very basic as well as useful tool in app.

Primarily it is used to prompt user for a useful action or feedback that is required at that moment.

We have two widget for this

1. Alert Dialog for android,
2. Cupertino Dialog for iOS.

Let’s start coding…

For Android: We will take a simple scaffold and floating action button. On click of floating action button we will show Alert dialog.

 Scaffold(
  body: Container(
    alignment: Alignment.center,
    child: Text("ALERT DIALOG EXAMPLE"),
  ),
  floatingActionButton: FloatingActionButton.extended(
    label: Text("Click me"),
    onPressed: () {
      showDialog(
          context: context,
          builder: (context) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new ListTile(
                  leading: new Icon(Icons.photo),
                  title: new Text('Photo'),
                  onTap: () {
                    Navigator.pop(context);
                  },
                ),
                new ListTile(
                  leading: new Icon(Icons.music_note),
                  title: new Text('Music'),
                  onTap: () {
                    Navigator.pop(context);
                  },
                ),
                new ListTile(
                  leading: new Icon(Icons.videocam),
                  title: new Text('Video'),
                  onTap: () {
                    Navigator.pop(context);
                  },
                ),
              ],
            );
          });
    },
    icon: Icon(Icons.open_with),
  ),
);

For iOS: We will take a simple scaffold and floating action button. On click of floating action button we will show Cupertino dialog.

Scaffold(
  body: Container(
    alignment: Alignment.center,
    child: Text("CUPERTINO DIALOG EXAMPLE"),
  ),
  floatingActionButton: FloatingActionButton.extended(
    label: Text("Click me"),
    onPressed: () {
      showCupertinoDialog( context: context,
          builder: (context) {
            return Scaffold(
              body: Center(
                child: Container(
                  height: 300,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new ListTile(
                        leading: new Icon(Icons.photo),
                        title: new Text('Photo'),
                        onTap: () {
                          Navigator.pop(context);
                        },
                      ),
                      new ListTile(
                        leading: new Icon(Icons.music_note),
                        title: new Text('Music'),
                        onTap: () {
                          Navigator.pop(context);
                        },
                      ),
                      new ListTile(
                        leading: new Icon(Icons.videocam),
                        title: new Text('Video'),
                        onTap: () {
                          Navigator.pop(context);
                        },
                      ),
                    ],
                  ),
                ),
              ),
            );
          });
    },
    icon: Icon(Icons.open_with),
  ),
);

Note: For Cupertino dialog you need a material widget

Connect with me on: Github Twitter LinkedIn Instagram Youtube Patreon

#Happy Coding

***subscribe for upcoming posts. Thanks for reading. Let me know what you think about this post.