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