Flutter Custom Alert Dialog

CodeWithFlutter
9 Min Read

Custom Alert Dialog

Alert Dialog is a kind of small popup window. It is used for users to make decisions, showing information to users, asking input from users, etc. It is very useful for developing applications and interacting with users.

The alert dialog is nothing, but it is a small popup that appears in the middle of the screen. In this blog, you will learn how to create a custom alert dialog box in a flutter. So let’s get started.

Flutter Custom Alert Dialog
Flutter Custom Alert Dialog

Code Implementation

To show an alert dialog, we need to click event. So create a MaterialButton or other widgets like GestureDetector, Inkwell or etc.

MaterialButton(
          color: Theme.of(context).primaryColor,
          onPressed: () {},
          child: Text("Click Button"),
        ), 

Align a Material Button in the center, wrap with the Center widget.

Center(
        child: MaterialButton(
          color: Theme.of(context).primaryColor,
          onPressed: () {},
          child: Text("Click Button"),
        ),
      ),

Create a new file called custom_alert_dialog.dart. Then create a Stateful widget called CustomAlertDialog.

Next, create a constructor as per your need. For Example,

 const CustomAlertDialog({
    Key? key,
    required this.title,
    required this.description,
  }) : super(key: key);

  final String title, description;

Then return the Dialog() widget. To make dialog corner radius circular use borderRadius property.

  @override
  Widget build(BuildContext context) {
    return Dialog(
      elevation: 0,
      backgroundColor: Color(0xffffffff),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
child : 
    ),
}

In child widget create the dialog UI as per your need. In this tutorial, I’m creating dialog like Instagram.

The Dialog, child widget create a column widget. In the column widget, first, create a title text widget make the font size 18 and font-weight bold. In the same way, create the description text widget. Then create two buttons for taking decisions. One button is the cancel button, another one is performing some actions.

Cancel the dialog box, use Navigator.of(context).pop();

The code is given below,

 Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(height: 15),
          Text(
            "${widget.title}",
            style: TextStyle(
              fontSize: 18.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 15),
          Text("${widget.description}"),
          SizedBox(height: 20),
          Divider(
            height: 1,
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: 50,
            child: InkWell(
              highlightColor: Colors.grey[200],
              onTap: () {},
              child: Center(
                child: Text(
                  "Continue",
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Theme.of(context).primaryColor,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ),
          Divider(
            height: 1,
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: 50,
            child: InkWell(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(15.0),
                bottomRight: Radius.circular(15.0),
              ),
              highlightColor: Colors.grey[200],
              onTap: () {
                Navigator.of(context).pop();
              },
              child: Center(
                child: Text(
                  "Cancel",
                  style: TextStyle(
                    fontSize: 16.0,
                    fontWeight: FontWeight.normal,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),

Then call the showDialog function, when you need,

showDialog(
              barrierColor: Colors.black26,
              context: context,
              builder: (context) {
                return CustomAlertDialog(
                  title: "Popup Dialog Title",
                  description: "Custom Popup dialog Description.",
                );
              },
            );

Demo

Flutter Custom Alert Dialog
Flutter Custom Alert Dialog

Compete Code

//main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Alert Dialog Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MaterialButton(
          color: Theme.of(context).primaryColor,
          onPressed: () {
            showDialog(
              barrierColor: Colors.black26,
              context: context,
              builder: (context) {
                return CustomAlertDialog(
                  title: "Popup Dialog Title",
                  description: "Custom Popup dialog Description.",
                );
              },
            );
          },
          child: Text("Click Button"),
        ),
      ),
    );
  }
}
//custom_alert_dialog.dart

import 'package:flutter/material.dart';

class CustomAlertDialog extends StatefulWidget {
  const CustomAlertDialog({
    Key? key,
    required this.title,
    required this.description,
  }) : super(key: key);

  final String title, description;

  @override
  _CustomAlertDialogState createState() => _CustomAlertDialogState();
}

class _CustomAlertDialogState extends State<CustomAlertDialog> {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      elevation: 0,
      backgroundColor: Color(0xffffffff),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(height: 15),
          Text(
            "${widget.title}",
            style: TextStyle(
              fontSize: 18.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 15),
          Text("${widget.description}"),
          SizedBox(height: 20),
          Divider(
            height: 1,
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: 50,
            child: InkWell(
              highlightColor: Colors.grey[200],
              onTap: () {
                //do somethig
              },
              child: Center(
                child: Text(
                  "Continue",
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Theme.of(context).primaryColor,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ),
          Divider(
            height: 1,
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: 50,
            child: InkWell(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(15.0),
                bottomRight: Radius.circular(15.0),
              ),
              highlightColor: Colors.grey[200],
              onTap: () {
                Navigator.of(context).pop();
              },
              child: Center(
                child: Text(
                  "Cancel",
                  style: TextStyle(
                    fontSize: 16.0,
                    fontWeight: FontWeight.normal,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Share this Article
Leave a comment