How to make reusable AlertDialog? - dart

Question

Flutter example for AlertDialog is:
Future<void> neverSatisfied() async {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: Text('Rewind and remember'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('You will never be satisfied.'),
Text('You\’re like me. I’m never satisfied.'),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('Regret'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
But I want make this reusable so I can call it and pass in custom text for example:
await neverSatisfied(context, text: text);
How can do?
Thanks!

Answer 1

You can create an alert dialog in separate class like below and can use that any where you want:
Note: pass context with "GlobalKey()" like used in
below class otherwise alert dialog will not display and give you error
such as "The specific widget that could not find a
MaterialLocalizations ancestor was"
Declare separate Utility class that will help to display dialog:
Utility
import 'package:flutter/material.dart';
class Utility{
static Utility utility = null;
static Utility getInstance(){
if(utility == null){
utility = Utility();
}
return utility;
}
showAlertDialog(BuildContext context, String alertTitle, String alertMessage){
// set up the buttons
Widget cancelButton = FlatButton(
child: Text("Cancel"),
onPressed: () {
Navigator.pop(context);
},
);
Widget continueButton = FlatButton(
child: Text("Continue"),
onPressed: () {
Navigator.pop(context);
},
);
// set up the AlertDialog
AlertDialog alert = AlertDialog(
title: Text(alertTitle),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text(alertMessage)
],
),
),
actions: [
cancelButton,
continueButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
}
Use that dialog in main.dart as below:
Main.dart
import 'package:flutter/material.dart';
import 'package:flutter_demo_app/Utility.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final navigatorKey = GlobalKey<NavigatorState>();
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
navigatorKey: navigatorKey,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(title: Text('AlertDialog')),
body: Column(
children: <Widget>[
RaisedButton(
child: Text('Get AlertDialog 1'),
onPressed: () {
Utility.getInstance().showAlertDialog(navigatorKey.currentState.overlay.context, 'Rewind and remember', 'You will never be satisfied.');
},
),
RaisedButton(
child: Text('Get AlertDialog 2'),
onPressed: () {
Utility.getInstance().showAlertDialog(navigatorKey.currentState.overlay.context, 'RememberRewinded', 'You\’re like me. I’m never satisfied.');
},
)
],
),
),
);
}
}

Answer 2

to refer alertTitle and alertMessage, add { } in showAlertDialog fields
example:
Utility
showAlertDialog(
{BuildContext context, String alertTitle, String alertMessage}).....
and call:
Main.dart
AlertWidget.getInstance().showAlertDialog(context: context, alertTitle: 'alert', alertMessage: "message",
);

Answer 3

This is how I created a reusable custom dialog...I made a new dart file and made a stateless widget called CustomAlert which takes an onPress and a message as parameter.
import 'dart:ui';
import 'package:flutter/material.dart';
class CustomAlert extends StatelessWidget {
final String? message;
final onPress;
CustomAlert({this.message, this.onPress});
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async => false,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Padding(
padding: const EdgeInsets.only(top: 48.0),
child: AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
contentPadding: EdgeInsets.only(left: 40, right: 40, top: 20),
actionsPadding: EdgeInsets.only(top: 15, bottom: 30),
actionsAlignment: MainAxisAlignment.center,
actions: [
ElevatedButton(
child: Text(
"RETRY",
style: TextStyle(
fontSize: 12,
letterSpacing: 7,
wordSpacing: 5,
color: Colors.black,
fontWeight: FontWeight.bold),
),
style: ButtonStyle(
elevation: MaterialStateProperty.all(4),
padding: MaterialStateProperty.all(EdgeInsets.only(
right: 30, left: 30, top: 10, bottom: 10)),
backgroundColor: MaterialStateProperty.all(Colors.white),
textStyle: MaterialStateProperty.all(
const TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
onPressed: onPress),
],
content: Text(message!,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 16,
color: Colors.black)),
),
),
),
);
}
}
After this, I just called it on another file using showDialog.
showDialog(
context: this.context,
builder: (ctx) => CustomAlert(
message:
"Hello there",
onPress: () {
Navigator.pop(this.context);
},
));