如何制作可重用的AlertDialog?

Flu*_*ase 2 dart flutter flutter-layout

Flutter 的示例AlertDialog是:

\n\n
Future<void> neverSatisfied() async {\n  return showDialog<void>(\n    context: context,\n    barrierDismissible: false, // user must tap button!\n    builder: (BuildContext context) {\n      return AlertDialog(\n        title: Text('Rewind and remember'),\n        content: SingleChildScrollView(\n          child: ListBody(\n            children: <Widget>[\n              Text('You will never be satisfied.'),\n              Text('You\\\xe2\x80\x99re like me. I\xe2\x80\x99m never satisfied.'),\n            ],\n          ),\n        ),\n        actions: <Widget>[\n          FlatButton(\n            child: Text('Regret'),\n            onPressed: () {\n              Navigator.of(context).pop();\n            },\n          ),\n        ],\n      );\n    },\n  );\n}\n
Run Code Online (Sandbox Code Playgroud)\n\n

但我想让它可重用,这样我就可以调用它并传入自定义文本,例如:

\n\n
await neverSatisfied(context, text: text);\n
Run Code Online (Sandbox Code Playgroud)\n\n

怎么办呢?

\n\n

谢谢!

\n

and*_*oid 5

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

\n\n
\n

注意:使用“GlobalKey()”传递上下文,如在下面的类中使用的那样,否则警报对话框将不会显示并给出错误,例如“找不到 MaterialLocalizations 祖先的特定小部件是”

\n
\n\n

声明单独的实用程序类将有助于显示对话框:

\n\n
\n

公用事业

\n
\n\n
import \'package:flutter/material.dart\';\n\nclass Utility{\n\n  static Utility utility = null;\n\n  static Utility getInstance(){\n    if(utility == null){\n      utility = Utility();\n    }\n    return utility;\n  }\n\n  showAlertDialog(BuildContext context, String alertTitle, String alertMessage){\n    // set up the buttons\n    Widget cancelButton = FlatButton(\n      child: Text("Cancel"),\n      onPressed:  () {\n        Navigator.pop(context);\n      },\n    );\n    Widget continueButton = FlatButton(\n      child: Text("Continue"),\n      onPressed:  () {\n        Navigator.pop(context);\n      },\n    );\n\n    // set up the AlertDialog\n    AlertDialog alert = AlertDialog(\n      title: Text(alertTitle),\n      content: SingleChildScrollView(\n        child: ListBody(\n          children: <Widget>[\n            Text(alertMessage)\n          ],\n        ),\n      ),\n      actions: [\n        cancelButton,\n        continueButton,\n      ],\n    );\n\n    // show the dialog\n    showDialog(\n      context: context,\n      builder: (BuildContext context) {\n        return alert;\n      },\n    );\n\n  }\n\n}\n
Run Code Online (Sandbox Code Playgroud)\n\n

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

\n\n
\n

主dart

\n
\n\n
import \'package:flutter/material.dart\';\nimport \'package:flutter_demo_app/Utility.dart\';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  final navigatorKey = GlobalKey<NavigatorState>();\n  // This widget is the root of your application.\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      navigatorKey: navigatorKey,\n      title: \'Flutter Demo\',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: Scaffold(\n        appBar: AppBar(title: Text(\'AlertDialog\')),\n        body: Column(\n          children: <Widget>[\n            RaisedButton(\n              child: Text(\'Get AlertDialog 1\'),\n              onPressed: () {\n                Utility.getInstance().showAlertDialog(navigatorKey.currentState.overlay.context, \'Rewind and remember\', \'You will never be satisfied.\');\n              },\n            ),\n            RaisedButton(\n              child: Text(\'Get AlertDialog 2\'),\n              onPressed: () {\n                Utility.getInstance().showAlertDialog(navigatorKey.currentState.overlay.context, \'RememberRewinded\', \'You\\\xe2\x80\x99re like me. I\xe2\x80\x99m never satisfied.\');\n              },\n            )\n          ],\n        ),\n      ),\n    );\n  }\n\n}\n
Run Code Online (Sandbox Code Playgroud)\n