Custom Dialog with Flutter – Step by Step Guide
Tags: flutter, alertdialog, showdialog
Published: 2021-01-04 14:37:26

---
title: Custom Dialog with Flutter – Step by Step Guide
published: true
date: 2021-01-03 14:43:55 UTC
tags: Flutter,AlertDialog,ShowDialog
canonical_url: https://instacodeblog.com/custom-dialog-with-flutter-step-by-step-guide/
---

[Flutter framework](https://flutter.dev/) provides an incredibly easy way to make UI components. But you have to through a lot of experimental processes to get the design or layout of your choice. In this tutorial, we will break down and see step by step to the process for **Custom Dialog Creation with Flutter**.

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

Recently I was working on developing a quiz app as mentioned in the article [“AppLifeCycleState Management Implementation In Flutter”](https://instacodeblog.com/applifecyclestate-management-implementation-in-flutter/). In this quiz app, I had to display prizes won by user and various other **AlertDialog** to the user. Using the default dialogs made the game look boring and I had to customize the dialog to make gameplay look fun.

## Creating Simple Alert Dialog

We will start by looking into the code for implementing a usual Alert Dialog in Flutter. This will give an idea for us to customize it later. Also, we will see how plain it looks.

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

```

In the content or title section of the AlertDialog, you can add widget of your choice. It is not only limited to text.

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.

Here is complete code on implementing **AlertDialog**.

```
showDialog(
		context: context,
    builder: (BuildContext context){
		    return AlertDialog(
		        title: Text("Alert Dialog"),
            content: Text("Dialog Content"),
						actions:[
		            FlatButton(
		                child: Text("Close"),
		                onPressed: (){
				                Navigator.of(context).pop();
                    },
                ),
            ],
        );
     }
)

```

## Creating Custom Dialog

Let us start creating our custom Dialog in flutter with a **Dialog** method.

```
Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(Consts.padding),
      ),
      elevation: 0.0,
      backgroundColor: Colors.transparent,
      child: dialogContent(context),
    );

```

Here we will have a Dialog with a **Round rectangular borde** r. If you look closely you can see we have created a method called **dialogContent()**.

We are setting all the attributes of dialog and heading to dialogContent() which contains all our important widgets. We will use the **Stack Method** to design our custom Dialog.

**You may note that in the Stack method the last element will move to the top.**

```
dialogContent(BuildContext context) {
    return Stack(
      children: <Widget>[
        //...bottom card part,
        //...top circlular image part,
        Container(
          padding: EdgeInsets.only(
            top: 200,
            bottom: 16.0,
            left: 16.0,
            right: 16.0,
          ),
          margin: EdgeInsets.only(top: 66.0),
          decoration: new BoxDecoration(
            color: Colors.black, //Colors.black.withOpacity(0.3),
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(16.0),
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 10.0,
                offset: const Offset(0.0, 10.0),
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min, // To make the card compact
            children: <Widget>[
              Text(
                title,
                style: TextStyle(
                  fontSize: 24.0,
                  fontWeight: FontWeight.w700,
                  color: Colors.white,
                ),
              ),
              SizedBox(height: 16.0),
              Text(
                description,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 16.0,
                  color: Colors.white70,
                ),
              ),
              SizedBox(height: 24.0),
              Align(
                alignment: Alignment.bottomRight,
                child: FlatButton(
                  color: Colors.amber,
                  onPressed: () {
                    Navigator.of(context).pop(); // To close the dialog
                  },
                  child: Text(
                    buttonText,
                    style: TextStyle(
                      color: Colors.purple,
                    ),
                  ),
                ),
              ),
	// Implement Circular Image here
            ],
          ),
        ),
      ],
    );
  }

```

So we have designed our text portion of the dialog. Here we will use the **Positioned** widget as a child in Stack to wrap the CircularAvatar as suggested by the flutter dev team.

Next, you need to put the **CircleAvatar** to the top of dialog. You need to use CircleAvatar as the child of Position method.

```
Positioned(
    left: 16.0,
    right: 16.0,
    child: CircleAvatar(
	    backgroundColor: Colors.amber,
	    radius: 150,
	    backgroundImage: NetworkImage(
		    '<https://media.giphy.com/media/J5kPUb8fe5W95DDAIv/giphy.gif>',
		  ),
	),
),

```

## Complete Code for Custom Dialog

So here is how your final code for the **CustomDialog** class will look. Also you can note here, that I have created a separate file to implement it. This would declutter my main code and would look clean.

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

class CustomDialog extends StatelessWidget {
  final String title, description, buttonText;
  final Image image;

  CustomDialog({
    @required this.title,
    @required this.description,
    @required this.buttonText,
    this.image,
  });

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16.0),
      ),
      elevation: 0.0,
      backgroundColor: Colors.transparent,
      child: dialogContent(context),
    );
  }

  dialogContent(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          padding: EdgeInsets.only(
            top: 66.0 + 16.0 * 12,
            bottom: 16.0,
            left: 16.0,
            right: 16.0,
          ),
          margin: EdgeInsets.only(top: 66.0),
          decoration: new BoxDecoration(
            color: Colors.black, //Colors.black.withOpacity(0.3),
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(16.0),
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 10.0,
                offset: const Offset(0.0, 10.0),
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min, // To make the card compact
            children: <Widget>[
              Text(
                title,
                style: TextStyle(
                  fontSize: 24.0,
                  fontWeight: FontWeight.w700,
                  color: Colors.white,
                ),
              ),
              SizedBox(height: 16.0),
              Text(
                description,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 16.0,
                  color: Colors.white70,
                ),
              ),
              SizedBox(height: 24.0),
              Align(
                alignment: Alignment.bottomRight,
                child: FlatButton(
                  color: Colors.amber,
                  onPressed: () {
                    Navigator.of(context).pop(); // To close the dialog
                  },
                  child: Text(
                    buttonText,
                    style: TextStyle(
                      color: Colors.purple,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        Positioned(
          left: 16.0,
          right: 16.0,
          child: CircleAvatar(
            backgroundColor: Colors.amber,
            radius: 150,
            backgroundImage: NetworkImage(
              '<https://upload.wikimedia.org/wikipedia/commons/1/1d/Rotating_Konarka_chaka.gif>',
            ),
          ),
        ),
      ],
    );
  }
}

```

We are done with the design. So in our **main.dart** file I will be calling the above method.

Here is how my main.dart file looks.

```
import 'custom_dialog.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Dialog'),
      ),
      body: Container(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            barrierDismissible: false,
            context: context,
            builder: (BuildContext context) => CustomDialog(
              title: "Well Done",
              description:
                  "You have sucessfully implemented Custom Dialog with flutter. \\n You have also learned theory behind and how to customize it further.",
              buttonText: "Close",
            ),
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

```

In main file we are using the **floatingActionButton** of default Flutter project code.

The result of above code is as shown below:

![Custom Dialog Creation with Flutter](https://instacodeblog.com/wp-content/uploads/2021/01/135817700_803196630229129_4867436469566406314_n.jpg)<figcaption>Custom Dialog Creation with Flutter</figcaption>

## Conclusion

I hope you get a better idea about how to implement AlertDialog and How to convert that to a more customized version.

**Have you found a better way to implement Custom Dialog? Did you face any issues? Let me know in the comments section.**

You can check my other [Flutter Tutorials Here](https://instacodeblog.com/category/flutter).

The post [Custom Dialog with Flutter – Step by Step Guide](https://instacodeblog.com/custom-dialog-with-flutter-step-by-step-guide/) appeared first on [InstaCodeBlog](https://instacodeblog.com).