Flutter自适应进度对话框插件adaptive_progress_dialog的使用

Flutter自适应进度对话框插件adaptive_progress_dialog的使用

adaptive_progress_dialog 是一个Flutter插件，它提供了一种简单的方法来显示进度对话框，并根据平台的不同自适应样式。AdaptiveProgressDialog 小部件是通用的，它接受一个类型参数 T，用于表示从对话框执行的异步操作返回的数据。数据通过 AdaptiveProgressDialogResult 类返回。

使用方法

1. 安装插件

首先，在 pubspec.yaml 文件中添加 adaptive_progress_dialog 依赖：

dependencies:
  adaptive_progress_dialog: ^latest_version

然后运行 flutter pub get 来安装插件。

2. 导入插件

在Dart代码中导入插件：

import 'package:adaptive_progress_dialog/adaptive_progress_dialog.dart';

3. 创建和显示对话框

以下是一个完整的示例，展示了如何创建和显示一个自适应进度对话框：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Adaptive Progress Dialog Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? dialogData;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (dialogData != null)
              Text(
                dialogData!,
                style: const TextStyle(fontSize: 26),
              ),
            const SizedBox(height: 64),
            ElevatedButton(
              onPressed: () async {
                // 创建一个 AdaptiveProgressDialog 实例
                final dialog = AdaptiveProgressDialog<String>(
                  title: 'Progress Dialog', // 对话框标题
                  content: 'Do you want to perform async operation?', // 对话框内容
                  confirmationButtonLabel: 'Yes', // 确认按钮标签
                  cancelButtonLabel: 'No, close', // 取消按钮标签
                  confirmButtonCallback: () async {
                    // 模拟一个耗时的异步操作
                    await Future.delayed(const Duration(seconds: 5));
                    return "Dialog Result Data"; // 返回操作结果
                  },
                  adaptiveProgressDialogStyle: AdaptiveProgressDialogStyle(
                    confirmButtonTextStyle: const TextStyle(color: Colors.red), // 确认按钮文本样式
                  ),
                );

                // 显示对话框并等待结果
                final adaptiveProgressDialogResult = await dialog.show(context);

                // 根据对话框的结果进行处理
                switch (adaptiveProgressDialogResult.status) {
                  case DialogStatus.success:
                    setState(() {
                      dialogData = adaptiveProgressDialogResult.data; // 更新状态
                    });
                    break;
                  case DialogStatus.canceled:
                    print("Dialog canceled by pressing on cancel button"); // 用户点击取消按钮
                    break;
                  case DialogStatus.error:
                    print("Dialog error: ${adaptiveProgressDialogResult.error}"); // 发生错误
                    break;
                  case DialogStatus.closed:
                    print("Dialog canceled by pressing outside dialog"); // 用户点击对话框外部
                    break;
                }
              },
              child: const Text("Show adaptive dialog"), // 按钮文本
            )
          ],
        ),
      ),
    );
  }
}

参数说明

AdaptiveProgressDialog 小部件有以下几个参数：

• title: 对话框的标题。
• content: 对话框的内容。
• confirmationButtonLabel: 确认按钮的标签，默认为 “Ok”。
• cancelButtonLabel: 取消按钮的标签，默认为 “Cancel”。
• confirmButtonCallback: 当确认按钮被按下时调用的回调函数。如果回调返回类型为 T 的数据，则可以通过 AdaptiveProgressDialogResult 的 data 属性获取该数据。如果回调失败，则返回带有 error 状态的 AdaptiveProgressDialogResult。
• adaptiveProgressDialogStyle: 用于自定义对话框样式的 AdaptiveProgressDialogStyle 对象。如果不提供，默认应用默认主题。
• isDismissible: 是否可以通过点击对话框外部关闭对话框，默认为 true。

样式定制

你可以通过 adaptiveProgressDialogStyle 参数来自定义对话框的样式。例如：

AdaptiveProgressDialog(
  title: 'Loading',
  content: 'Please wait...',
  adaptiveProgressDialogStyle: AdaptiveProgressDialogStyle(
    titleTextStyle: TextStyle(
      fontSize: 24.0,
      fontWeight: FontWeight.bold,
      color: Colors.blue,
    ),
    contentTextStyle: TextStyle(
      fontSize: 16.0,
      color: Colors.grey,
    ),
    confirmButtonTextStyle: TextStyle(
      fontSize: 20.0,
      color: Colors.white,
    ),
    cancelButtonTextStyle: TextStyle(
      fontSize: 20.0,
      color: Colors.red,
    ),
    materialContentPadding: EdgeInsets.all(16.0),
    materialActionsPadding: EdgeInsets.only(right: 8.0, bottom: 8.0),
    materialActionsAlignment: MainAxisAlignment.end,
  ),
  confirmButtonCallback: () async {
    // Do some work here...
  },
);