September 10, 2020

Custom Alert Dialog in Flutter

By Mohit Agrawal

Learn all the basics concepts related to Alert Dialog in Flutter

Introduction

This is going to be a very basic Flutter Tutorial designed for beginners. In this article, you will learn everything about the Alert Dialog in Flutter. By the end of this tutorial, you will be able to design your own custom Alert Dialog.

What we will build?

I will show you three types of Alert Dialog and I guarantee that if you understand all of them then you can design any complex Alert Dialog of your own.

These are the three Alert Dialog which we are going to learn in this Flutter tutorial.

custom alert dialog flutter 1

I have designed all of these alert dialogs as a reusable widget. It means you can directly use them in your project. 😍

Implementation

We will go step by step since this article is mainly for the beginners so I will start with the very basic one then we will slowly move to the more complex dialog designs.

Create a new Flutter project in android studio and design three raised buttons like this. On the click of every button, we will show a different Alert.

custom alert dialog flutter 2

Now to show any type of alert in Flutter we need to use the method showDialog(). So in the onPress() of all the three-button let’s write the code for showDialog().

 RaisedButton(
              child: Text('Simple Alert Dialog'),
              onPressed: () {
                showDialog(context: context,
                    builder: (BuildContext context) {
                      return OurCustomWidget()
                    });
              },),

Now follow the below instructions step by step to design the AlertDialog.

Basic Alert Dialog in Flutter

This is the simplest form of showing any kind of alert to the user. It comes with the Flutter SDK itself.

custom alert dialog flutter 3

The name of the widget is AlertDialog() and let’s see how to implement it. Also, we have to make a reusable widget for this so that we can use this anywhere in the project.

class SimpleDialog extends StatelessWidget {
  final title;
  SimpleDialog(this.title);
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      //title: Text('Alert'),
      content: Text(title),
      actions: <Widget>[
        // usually buttons at the bottom of the dialog
        new FlatButton(
          child: new Text("Close"),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  }
}

First of all, I have created a StatelessWidget class so that anyone can use this throughout the project.

This constructor SimpleDialog(this.title) will allow you to pass the dynamic title. It means you can pass any title you want to show in AlertDialog.

🐱‍🏍content: and actions: are the most important part here. In the content, you can pass any widgets. I am using a simple Text() but you are free to do some experiments here.

In actions we give buttons for the AlertDialog. You can give one, two, or even three.

Simple Custom Alert Dialog in Flutter

Let’s do some customization and design some more beautiful AlertDialogs. In the above example, we have used AlertDialog() but now we will use Dialog() in the next two examples.

custom alert dialog flutter 4

The concept will the same only as we did in AlertDialog() but in Dialog() we get more control over the customization. Let’s understand this with the help of code.

class SimpleCustomAlert extends StatelessWidget {
  final title;
  SimpleCustomAlert(this.title);
  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(4)
      ),
      child: Container(
        height: 200,
        child: Column(
          children: [
            Expanded(
              child: Container(
                color: Colors.white70,
                child: Icon(Icons.account_balance_wallet, size: 60,),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.redAccent,
                child: SizedBox.expand(
                    child: Padding(
                      padding: const EdgeInsets.all(15.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(title,
                            style: TextStyle(
                              color: Colors.white,
                            ),
                            textAlign: TextAlign.center,
                          ),
                          RaisedButton(
                            color: Colors.white,
                            child: Text('Okay'),
                            onPressed: ()=> {
                              Navigator.of(context).pop()
                            },
                          )
                        ],
                      ),
                    ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

In the child, you can give any widgets. So as you can see I have given a Container of height 200 as a parent widget. After that dividing the container into two equal parts with help of Column widgets.

You can easily show some creativity here and anything you want. Do try different designs as well.

Advance Custom Alert Dialog in Flutter

Here also we will be using Dialog() but this time we will design a little complex UI design for AlertDialog.

custom alert dialog flutter 5
class AdvanceCustomAlert extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(4.0)
      ),
      child: Stack(
        overflow: Overflow.visible,
        alignment: Alignment.topCenter,
        children: [
          Container(
            height: 200,
            child: Padding(
              padding: const EdgeInsets.fromLTRB(10, 70, 10, 10),
              child: Column(
                children: [
                  Text('Warning !!!', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),),
                  SizedBox(height: 5,),
                  Text('You can not access this file', style: TextStyle(fontSize: 20),),
                  SizedBox(height: 20,),
                  RaisedButton(onPressed: () {
                    Navigator.of(context).pop();
                  },
                    color: Colors.redAccent,
                    child: Text('Okay', style: TextStyle(color: Colors.white),),
                  )
                ],
              ),
            ),
          ),
          Positioned(
            top: -60,
            child: CircleAvatar(
              backgroundColor: Colors.redAccent,
              radius: 60,
              child: Icon(Icons.assistant_photo, color: Colors.white, size: 50,),
            )
          ),
        ],
      )
    );
  }
}

I am using Stack widget to make this type of UI design. This is just an example of UI. You can make it as complex as you want.

Instead of an Icon in CircleAvatar(), you can also use Lottie animation inside it.

Demo

Conclusion

I strongly recommend you to try the different UI design for the Flutter AlertDialog. Please let me know your questions in the comment section.

Subscribe YouTube: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!

FAQ

  1. How to close Alert Dialog in Flutter?

    The answer is very simple. You just have pop out the alert view from the navigation stack. Create a button in your AlertDialog and put this code Navigator.of(context).pop(); in the onPress().custom alert dialog flutter 5