Flutter信息对话框展示插件dialog_information_to_specific_platform的使用

插件简介

此插件引用了来自[AlertDialog]（https://api.flutter.dev/flutter/material/AlertDialog-class.html）和[CupertinoAlertDialog]（https://api.flutter.dev/flutter/cupertino/CupertinoAlertDialog-class.html）的专业小部件。只需调用此包中的小部件，根据应用程序运行的平台，将渲染Material对话框或Cupertino对话框。

开始使用

要使用此插件，首先需要在pubspec.yaml文件中进行配置，如下所示：

dependencies:
  dialog_information_to_specific_platform: <最新版本>

配置完成后，您需要在控制台/终端或IDE中运行flutter packages get命令。

在您的Widget中，需要导入以下包，其中第二个包仅用于创建对话框的按钮，但您可以发送一个包含您自定义Widget的列表。

import 'package:dialog_information_to_specific_platform/dialog_information_to_specific_platform.dart';
import 'package:dialog_information_to_specific_platform/flat_buttons/actions_flatbutton_to_alert_dialog.dart';

基本用法

为了测试查看对话框，我们将首先有以下图像，显示一个带有FAB（浮动操作按钮）的Scaffold，当激活时将显示对话框。

为了达到上述图像的效果，我们需要实现以下代码片段：

import 'package:dialog_information_to_specific_platform/dialog_information_to_specific_platform.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Platform Dialog Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Platform Dialog Tester'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(),
      floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.blue,
          child: Icon(Icons.message),
          tooltip: 'Press to show the platform dialog',
          elevation: 10,
          onPressed: () async {
            await showDialog(
              barrierDismissible: false,
              context: context,
              child: InformationAlertDialog(
                iconTitle: Icon(
                  Icons.error,
                  color: Colors.red,
                ),
                title: 'Dialog title',
                message: 'Dialog content',
              ),
            );
          }),
    );
  }
}

使用预定义按钮

在之前的例子中，我们让组件创建了一个标准按钮，因为它没有接收到特定的按钮。现在，在这个新示例中，我们将创建两个按钮并将其传递给组件，最终效果如序列中显示的那样。

为了达到上述图像的效果，我们需要向InformationAlertDialog()添加以下参数：

buttons: [
  ActionsFlatButtonToAlertDialog(
    messageButton: 'Cancel',
  ),
  ActionsFlatButtonToAlertDialog(
    messageButton: 'Confirm',
  ),
],

检查对话框中按下的按钮

使用我们已经实现的代码，我们将做一些更改以识别对话框中按下的按钮。见下文。注意buttonPressed声明，并且它接收showDialog()的返回值，之后只是显示结果，但在这里可以执行您的逻辑。

onPressed: () async {
  var buttonPressed = await showDialog(...);
  print('你按下了带有"$buttonPressed"标题的按钮');
},

完整示例代码

以下是完整的示例代码，展示了如何使用dialog_information_to_specific_platform插件来展示信息对话框。

// example/lib/main.dart
import 'package:dialog_information_to_specific_platform/dialog_information_to_specific_platform.dart';
import 'package:dialog_information_to_specific_platform/flat_buttons/actions_flatbutton_to_alert_dialog.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Platform Dialog Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Platform Dialog Tester'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(),
      floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.blue,
          child: Icon(Icons.message),
          tooltip: 'Press to show the platform dialog',
          elevation: 10,
          onPressed: () async {
            var buttonPressed = await showDialog(
              barrierDismissible: false,
              context: context,
              builder: (BuildContext context) {
                return InformationAlertDialog(
                  iconTitle: Icon(
                    Icons.error,
                    color: Colors.red,
                  ),
                  title: 'Dialog title',
                  message: 'Dialog content',
                  buttons: [
                    ActionsFlatButtonToAlertDialog(
                      messageButton: 'Cancel',
                    ),
                    ActionsFlatButtonToAlertDialog(
                      messageButton: 'Confirm',
                    ),
                  ],
                );
              },
            );

            if (buttonPressed == 'Cancel') {
              print('用户取消了对话框');
            } else if (buttonPressed == 'Confirm') {
              print('用户确认了对话框');
            }
          }),
    );
  }
}