Flutter Alert Dialog to Custom Dialog

November 9, 2019

864

In the mobile apps, we use Dialog everywhere from alerting some situation to the user to get some feedback from the user.

We can use alert dialog to pause the user interaction with the current screen and show some intermediate action to the user like show error, take user email to process next step kind of stuff.

When comes to the Dialog in Flutter there are multiple ways of implement like

Alert Dialog
Custom Dialog
Full-Screen Dialog

Flutter simple Alert Dialog

Adding simple Dialog to your screen in pretty easy in Flutter.

Before adding Dialog you must call showDialog function to change current screen state to show the intermediate Dialog popup.

In here we use AlertDialog widget to show simple Dialog with title and some text in the body.


      showDialog(
              context: context,
              builder: (BuildContext context){
                  return AlertDialog(
                    title: Text("Alert Dialog"),
                    content: Text("Dialog Content"),
                  );
              }
            )

Under the content, it does not required to add only the Text, you can add any widget like Image or something. But Because we use Alert Dialogs in simple use case it better to show simple text or an image inside the content.

Show Dialog when click button

you can add above implementation inside the onTap method or you can add implementation to separate method and call the method inside the onTap.


floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Text("Alert Dialog"),
                  content: Text("Dialog Content"),
                );
              });
        },
        child: Icon(Icons.add),
      ),

Add buttons to Alert Dialogs

In the AlertDialog widget, there is a parameter called action. It accepts arrays of widgets and you can provide multiple buttons to that. Those Buttons will appear in the bottom right corner of the dialog.

           actions:[
                      FlatButton(
                        child: Text("Close"),
                      )
                    ],

How to close Alert Dialogs

In here we need to close the current Dialog when click Close button.

We can use pop method in Navigator class for that.

           FlatButton(
                        child: Text("Close"),
                        onPressed: (){
                          Navigator.of(context).pop();
                        },
                      )

Flutter custom Alert Dialog

Simple Alert Dialog will not be useful for every requirement. If you want to implement more advanced custom Dialog, you can use Dialog widget for that. Instead of the AlertDialog , in here we return Dialog widget. The showDialog method will remain the same.

You can use a Container widget to set relevant height for the Dialog.

Set the round corner to the Dialog by setting RoundedRectangleBorder for the shape and provide radius as you need.

           
showDialog(
        context: context,
        builder: (BuildContext context) {
          return Dialog(
            shape: RoundedRectangleBorder(
                borderRadius:
                    BorderRadius.circular(20.0)), //this right here
            child: Container(
              height: 200,
              child: Padding(
                padding: const EdgeInsets.all(12.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    TextField(
                      decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: 'What do you want to remember?'),
                    ),
                    SizedBox(
                      width: 320.0,
                      child: RaisedButton(
                        onPressed: () {},
                        child: Text(
                          "Save",
                          style: TextStyle(color: Colors.white),
                        ),
                        color: const Color(0xFF1BC0C5),
                      ),
                    )
                  ],
                ),
              ),
            ),
          );
        });

Flutter Full Screen Dialog

By Using showDialog method we cannot show full-screen Dialog. If we want to show dialog in full screen we must use showGeneralDialog method provided by Flutter SDK.

There are some interesting parameter available in showGeneralDialog method.

barrierColor – Change dropshadow outside the dialog.

transitionDuration – Animation duration

barrierDismissible – Dismiss dialog by clicking outside in current route

           
showGeneralDialog(
      context: context,
      barrierDismissible: true,
      barrierLabel: MaterialLocalizations.of(context)
          .modalBarrierDismissLabel,
      barrierColor: Colors.black45,
      transitionDuration: const Duration(milliseconds: 200),
      pageBuilder: (BuildContext buildContext,
          Animation animation,
          Animation secondaryAnimation) {
        return Center(
          child: Container(
            width: MediaQuery.of(context).size.width - 10,
            height: MediaQuery.of(context).size.height -  80,
            padding: EdgeInsets.all(20),
            color: Colors.white,
            child: Column(
              children: [
                RaisedButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text(
                    "Save",
                    style: TextStyle(color: Colors.white),
                  ),
                  color: const Color(0xFF1BC0C5),
                )
              ],
            ),
          ),
        );
      });

Conclusion

I hope you get a better idea about how to implement AlertDialog and How to convert that to a more customized version and how to show a dialog in full screen. Please check the view below to get a better understanding about implementation