如何制作可重用的AlertDialog?

时间:2019-04-24 15:37:42

标签: dart flutter flutter-layout

AlertDialog的颤振示例为:

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

但是我想使它可重用,以便我可以调用它并传递自定义文本,例如:

await neverSatisfied(context, text: text);

怎么办?

谢谢!

2 个答案:

答案 0 :(得分:0)

您可以在下面的单独类中创建一个警报对话框,并可以在任何需要的地方使用它:

  

注意:使用“ GlobalKey()”传递上下文,如   下面的类,否则警告对话框将不会显示并给您错误   例如“无法找到   MaterialLocalizations的祖先是“

声明将有助于显示对话框的单独的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;
      },
    );

  }

}

如下所示在main.dart中使用该对话框:

  

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

}

答案 1 :(得分:0)

要引用alertTitle和alertMessage,请在showAlertDialog字段中添加{}

示例:

<块引用>

实用性

showAlertDialog(
      {BuildContext context, String alertTitle, String alertMessage}).....

并调用:

<块引用>

Main.dart

AlertWidget.getInstance().showAlertDialog(context: context, alertTitle: 'alert', alertMessage: "message",
      );