Create Custom Dialog Modal in Flutter

Custom Dialog in Flutter

Dialog boxes are one of the most used & important components for any mobile applications. Dialogs are used for action confirmation, user inputs, to display warnings or errors.

One thing is for sure is that the inbuilt dialogs widget provided by the Flutter are useful but it is boring and dull & sometimes it does not go very well your own custom-designed interface so you seek to build your own custom dialog widget.

There is a piece of good news that Flutter as it promises we can create our own custom dialog widgets with very ease & I mean it. You can find the complete project on GitHub.

Project link will be provided at the bottom of the article as usual. Let’s start building our own custom dialog widget in Flutter.

Prerequisite.

To follow along with the tutorial you don’t need to have any other knowledge than of the Flutter framework itself.

Project Setup.

Open your terminal & fire this command to create a new Flutter project.

>flutter create <YOUR_PROJECT_NAME>

This will create a new Flutter project for you. Now open this project I any of your favorite code editors. We have to set up our assets folder in the root directory. Inside the assets directory, I have put an image named image.png. You can use your own image file or you can find the same image in the project files

Click on the pubspec.yaml file to edit it.  We need to tell the Flutter to load this image asset so that we can use it in our project like this,

assets listing

assets listing

 

Creating the Basic Layout.

I am going to first create one basic layout for our application. This layout will contain three buttons which will show different types of dialogs on tapping.

main.dart.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CustomModalDialogs(),
    );
  }
}

class CustomModalDialogs extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                showSimpleCustomDialog(context);
              },
              child: Text("Show Simple Custom Dialog"),
            ),
            RaisedButton(
              onPressed: () {
                showFancyCustomDialog(context);
              },
              child: Text("Show Fancy Custom Dialog"),
            ),
            RaisedButton(
              onPressed: () {
                showCustomDialogWithImage(context);
              },
              child: Text("Show Custom Dialog With Image"),
            ),
          ],
        ),
      ),
    );
  }

}

This is our initial UI layout,

Basic UI layout

Basic UI layout

 

Creating a Simple Custom Dialog.

The approach to building a custom Dialog UI is simple. Flutter provides a Dialog() widget & this widget takes a child widget & some other properties. We can pass any widget as a child to Dialog() widget.

After we will pass this custom Dialog widget to showDialog() which handles all the Dialog related activity in the Flutter. This method takes two named argument one is context & other is builder function which will build our Dialog modal.

void showSimpleCustomDialog(BuildContext context) {
    Dialog simpleDialog = Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12.0),
      ),
      child: Container(
        height: 300.0,
        width: 300.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(15.0),
              child: Text(
                'Simpe Custom Modal Dialog....',
                style: TextStyle(color: Colors.red),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 10, right: 10, top: 50),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  RaisedButton(
                    color: Colors.blue,
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text(
                      'Okay',
                      style: TextStyle(fontSize: 18.0, color: Colors.white),
                    ),
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  RaisedButton(
                    color: Colors.red,
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text(
                      'Cancel!',
                      style: TextStyle(fontSize: 18.0, color: Colors.white),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
    showDialog(
        context: context, builder: (BuildContext context) => simpleDialog);
}

The simple dialog looks like this,

Simple Dialog Screen

Simple Dialog Screen

A Fancy Dialog.

Let’s try to build a fancier custom dialog widget which will look much cooler than the above one. The implementation method will the same as above.

void showFancyCustomDialog(BuildContext context) {
    Dialog fancyDialog = Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12.0),
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20.0),
        ),
        height: 300.0,
        width: 300.0,
        child: Stack(
          children: <Widget>[
            Container(
              width: double.infinity,
              height: 300,
              decoration: BoxDecoration(
                color: Colors.grey[100],
                borderRadius: BorderRadius.circular(12.0),
              ),
            ),
            Container(
              width: double.infinity,
              height: 50,
              alignment: Alignment.bottomCenter,
              decoration: BoxDecoration(
                color: Colors.greenAccent,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(12),
                  topRight: Radius.circular(12),
                ),
              ),
              child: Align(
                alignment: Alignment.center,
                child: Text(
                  "Fancy Dialog Title!",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.w600),
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: InkWell(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Container(
                  width: double.infinity,
                  height: 50,
                  decoration: BoxDecoration(
                    color: Colors.blue[300],
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(12),
                      bottomRight: Radius.circular(12),
                    ),
                  ),
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      "Okay let's go!",
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                          fontWeight: FontWeight.w600),
                    ),
                  ),
                ),
              ),
            ),
            Align(
        // These values are based on trial & error method
              alignment: Alignment(1.05, -1.05),
              child: InkWell(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Icon(
                    Icons.close,
                    color: Colors.black,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
    showDialog(
        context: context, builder: (BuildContext context) => fancyDialog);
 }
Fancy Dialog Screen

Fancy Dialog Screen

A Dialog With Image.

Now let’s create a Dialog Box with an image inside it. Remember we have already added that image in our pubspec.yaml file

void showCustomDialogWithImage(BuildContext context) {
    Dialog dialogWithImage = Dialog(
      child: Container(
        height: 300.0,
        width: 300.0,
        child: Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(12),
              alignment: Alignment.center,
              decoration: BoxDecoration(color: Colors.grey[300]),
              child: Text(
                "Dialog With Image",
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 18,
                    fontWeight: FontWeight.w600),
              ),
            ),
            Container(
              height: 200,
              width: 300,
              child: Image.asset(
                'assets/image.png',
                fit: BoxFit.scaleDown,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                RaisedButton(
                  color: Colors.blue,
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text(
                    'Okay',
                    style: TextStyle(fontSize: 18.0, color: Colors.white),
                  ),
                ),
                SizedBox(
                  width: 20,
                ),
                RaisedButton(
                  color: Colors.red,
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text(
                    'Cancel!',
                    style: TextStyle(fontSize: 18.0, color: Colors.white),
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );

    showDialog(
        context: context, builder: (BuildContext context) => dialogWithImage);
}
Dialog With Image Screen

Dialog With Image Screen

Conclusion.

As you can see you can create any type of custom Dialog widgets in Flutter as it makes it easy to do so. There are now endless possibilities of creating any custom dialog in Flutter.

If you have any suggestions or if you face any problem please write it down in the comment box…

Happy Coding…:)

Download Project From GitHub
Ropali Munshi
Ropali Munshi
Ropali Munshi is fullstack PHP Developer. He is passionate developer who loves to learn and expirement with new programming languages , libraries and frameworks. Nowdays he is more into the JavaScript realm.

Leave a Reply

Your email address will not be published. Required fields are marked *

You Don't Want To Miss It!

Please subscribe to our newsletter. Every week I share tips, tricks, tutorials, free books & video course directly in your inbox.