How to make reusable AlertDialog?

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

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

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

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

}