Flutter Custom Alert Dialog

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"), ),
Code language: CSS (css)

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"), ), ),
Code language: CSS (css)

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;
Code language: JavaScript (javascript)

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 : ), }
Code language: CSS (css)

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, ), ), ), ), ), ], ),
Code language: JavaScript (javascript)

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.", ); }, );
Code language: JavaScript (javascript)

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"), ), ), ); } }
Code language: JavaScript (javascript)
//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, ), ), ), ), ), ], ), ); } }
Code language: JavaScript (javascript)