Flutter custom alert box :
Flutter custom alert box is the new way to customize the way a alert box is displayed.Some times we need to alter the default design of a alertbox to provide more options for the user.
In the default alert box we get a basic title, content and two buttons there you cannot customize the fields so to get the customization’s we make use of custom alert box.
Here we are designing this alert box to support multiple buttons and textview’s to display messages and accept user actions as well.
Flutter custom alert box is used to display user a piece of information to confirm the same or provide multiple options to be done based on the task.
In this tutorial we will discuss how to design a flutter alert box in flutter to exit the app and options involved in it.
Flutter custom alert box video tutorial :
Go through the below tutorial for more details in alert box implementation.
Project Structure :
This image depicts the usage of flutter custom alert box project structure implementation.
Starting from the void() and consider default class MyApp().
void main() => runApp(MyApp());
Create a class extending StatelessWidget, declaring a appBar
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Alert Dialog',
home: Scaffold(
appBar: AppBar(
title: Text('Alert Dialog'),
),
body: CustomAlert()),
);
}
}
Declaring a CustomAlert class extending StatelessWidget where we are adding a button to make alertbox appear by ctapping on it.
RaisedButton(
child: Text('Show alert'),
onPressed: () {
showAlertDialog(context);
},
),
class CustomAlert extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: RaisedButton(
child: Text('Show alert'),
onPressed: () {
showAlertDialog(context);
},
),
),
);
}
}
Creating a ok button in alertbox
Widget ok = FlatButton(
child: Text("Ok"),
onPressed: () {
},
);
Creating a cancel button
Widget cancel = FlatButton(
child: Text("Cancel"),
onPressed: () {
Navigator.pop(context);
},
);
Create a help button
Widget help = FlatButton(
child: Text("help"),
onPressed: () {
},
);
Show alert box with these buttons which we have created above.Also you can add more fields if required.
AlertDialog alert = AlertDialog(
title: Text("Exit"),
content: Text("Are you sure you want to exit?"),
actions: [
ok,
cancel,
help
],
);
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
Full Code :
Providing the full source code for flutter custom alert box implementation.And provide the method show dialog to display the final dialog once all the customization’s are made.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Alert Dialog',
home: Scaffold(
appBar: AppBar(
title: Text('Alert Dialog'),
),
body: CustomAlert()),
);
}
}
class CustomAlert extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: RaisedButton(
child: Text('Show alert'),
onPressed: () {
showAlertDialog(context);
},
),
),
);
}
}
showAlertDialog(BuildContext context) {
Widget cancel = FlatButton(
child: Text("Cancel"),
onPressed: () {
Navigator.pop(context);
},
);
Widget ok = FlatButton(
child: Text("Ok"),
onPressed: () {
},
);
Widget help = FlatButton(
child: Text("help"),
onPressed: () {
},
);
AlertDialog alert = AlertDialog(
title: Text("Exit"),
content: Text("Are you sure you want to exit?"),
actions: [
ok,
cancel,
help
],
);
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
Flutter custom alert box output :
This image depicts the usage of flutter custom alert box.
If you have any query’s on the tutorial flutter custom alert box do let us know in the comment section below.If you like this tutorial do like and share for more interesting tutorials.
