Flutter进度对话框插件progress_dialog_fork的使用

Flutter进度对话框插件progress_dialog_fork的使用

progress_dialog_fork 是一个轻量级的进度对话框插件。由于它是一个状态小部件（StatefulWidget），您可以动态地更改对话框中显示的文本。

注意事项

感谢您使用本插件。由于一些原因，该插件已停止维护，请寻找其他库来完成本插件的功能。相信其他插件会更加有帮助。请参阅这里的仓库链接：OTS (Over the screen)。

       

 

支持的Dart版本

Dart SDK版本 >= 2.7.0

演示

安装

dependencies:
  progress_dialog: ^1.2.4

如何使用

在您的 Dart 文件中导入插件：

import 'package:progress_dialog_fork/progress_dialog_fork.dart';

创建并初始化一个 ProgressDialog 对象，并传递上下文给它：

  1. 初始化 ProgressDialog 对象

    final ProgressDialog pr = ProgressDialog(context);

  2. 默认情况下，它是一个普通的对话框，用于显示一些消息。如果您想用它来显示已完成的百分比，请指定可选的 type 参数，并指定是否允许对话框在按下返回按钮时消失 (isDismissible) 参数（可选）。

    // 对于普通对话框
pr = ProgressDialog(context, type: ProgressDialogType.Normal, isDismissible: true, showLogs: true);

// 用于显示进度百分比
pr = ProgressDialog(context, type: ProgressDialogType.Download, isDismissible: true, showLogs: true);

    注意: 请在有上下文的地方初始化 ProgressDialog。

  3. 样式化进度对话框（可选）

    pr.style(
  message: 'Downloading file...',
  borderRadius: 10.0,
  backgroundColor: Colors.white,
  progressWidget: CircularProgressIndicator(),
  elevation: 10.0,
  insetAnimCurve: Curves.easeInOut,
  progress: 0.0,
  textDirection: TextDirection.rtl,
  maxProgress: 100.0,
  progressTextStyle: TextStyle(
    color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400),
  messageTextStyle: TextStyle(
    color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600)
);

    注意: 不需要使用所有参数，它们都是可选的。

  4. 显示进度对话框

    await pr.show();

  5. 动态更新显示的内容

    pr.update(
  progress: 50.0,
  message: "Please wait...",
  progressWidget: Container(
    padding: EdgeInsets.all(8.0), child: CircularProgressIndicator()),
  maxProgress: 100.0,
  progressTextStyle: TextStyle(
    color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400),
  messageTextStyle: TextStyle(
    color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600),
);

    注意: 不需要使用所有参数，它们都是可选的。

  6. 隐藏进度对话框

    pr.hide().then((isHidden) {
  print(isHidden);
});

// 或者
await pr.hide();

    注意: 导航到下一个屏幕必须在 hide() 完成之后进行。查看这里 作为示例。

检查进度对话框是否正在显示

bool isProgressDialogShowing = pr.isShowing();
print(isProgressDialogShowing);

使用自定义主体

pr = ProgressDialog(
  context,
  type: ProgressDialogType.Normal,
  isDismissible: true,
  // 自定义主体
  customBody: LinearProgressIndicator(
    valueColor: AlwaysStoppedAnimation<Color>(Colors.blueAccent),
    backgroundColor: Colors.white,
  ),
);

更多关于Flutter进度对话框插件progress_dialog_fork的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter进度对话框插件progress_dialog_fork的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用progress_dialog_fork插件来实现进度对话框的一个示例代码。这个插件允许你显示一个加载中的对话框，向用户展示一个进度指示器或消息，直到某个异步操作完成。

首先，确保你已经在pubspec.yaml文件中添加了progress_dialog_fork依赖：

dependencies:
  flutter:
    sdk: flutter
  progress_dialog_fork: ^1.0.1  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter项目中按照以下方式使用ProgressDialog：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late ProgressDialog pr;

  @override
  void initState() {
    super.initState();
    pr = ProgressDialog(context,
        type: ProgressDialogType.Normal,
        isDismissible: false,
        showLogs: true);
  }

  @override
  void dispose() {
    pr?.dismiss();
    super.dispose();
  }

  Future<void> showLoadingDialog() async {
    pr.show();
    await Future.delayed(Duration(seconds: 3)); // 模拟长时间操作
    pr.dismiss();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Dialog Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showLoadingDialog();
          },
          child: Text('Show Loading Dialog'),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 初始化ProgressDialog实例：在_MyHomePageState的initState方法中，我们创建了ProgressDialog的实例，并设置了一些基本属性，比如对话框类型、是否可取消以及是否显示日志。

  2. 显示进度对话框：在showLoadingDialog函数中，我们首先调用pr.show()来显示进度对话框，然后使用Future.delayed模拟一个耗时操作（比如网络请求）。操作完成后，调用pr.dismiss()来关闭对话框。

  3. 按钮触发对话框：在UI部分，我们添加了一个ElevatedButton，当用户点击按钮时，会触发showLoadingDialog函数，从而显示进度对话框。

  4. 清理资源：在dispose方法中，我们确保在组件销毁时调用pr?.dismiss()来避免内存泄漏。

这个示例展示了如何在Flutter应用中使用progress_dialog_fork插件来显示一个简单的进度对话框。你可以根据需要进一步自定义对话框的样式和行为。

回到顶部