Flutter进度提示插件bmprogresshud的使用

插件简介

bmprogresshud 是一个轻量级的Flutter进度提示HUD，灵感来源于SVProgressHUD。它为你的Flutter应用提供了加载HUD、成功/失败HUD、进度HUD和Toast等功能。

安装

在pubspec.yaml文件中添加依赖：

dependencies:
  bmprogresshud: ^最新版本号

使用方法

Local HUD

你可以将ProgressHud放置在你的容器中，并通过ProgressHud.of(context)来获取HUD实例。

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProgressHud(
      isGlobalHud: true,
      child: MaterialApp(home: HomePage()),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  GlobalKey<ProgressHudState> _hudKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("hud demo"),
      ),
      body: ProgressHud(
        key: _hudKey,
        maximumDismissDuration: Duration(seconds: 2),
        child: Center(
          child: Builder(builder: (context) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ElevatedButton(
                  onPressed: () {
                    _showLoadingHud(context);
                  },
                  child: Text("显示加载"),
                ),
                ElevatedButton(
                  onPressed: () {
                    _showToast(context);
                  },
                  child: Text("显示消息"),
                ),
                ElevatedButton(
                  onPressed: () {
                    _showSuccessHud(context);
                  },
                  child: Text("显示成功"),
                ),
                ElevatedButton(
                  onPressed: () {
                    _showErrorHud(context);
                  },
                  child: Text("显示错误"),
                ),
                ElevatedButton(
                  onPressed: () {
                    _showProgressHud(context);
                  },
                  child: Text("显示进度"),
                ),
                Divider(height: 50),
                ElevatedButton(
                  onPressed: () async {
                    ProgressHud.showLoading();
                    await Future.delayed(const Duration(seconds: 1));
                    ProgressHud.dismiss();
                  },
                  child: Text("显示全局加载"),
                ),
                ElevatedButton(
                  onPressed: () {
                    ProgressHud.showAndDismiss(
                        ProgressHudType.success, "加载成功");
                  },
                  child: Text("显示全局成功"),
                ),
                ElevatedButton(
                  onPressed: () {
                    ProgressHud.showAndDismiss(
                        ProgressHudType.error, "加载失败");
                  },
                  child: Text("显示全局错误"),
                ),
                ElevatedButton(
                  onPressed: () {
                    _showProgressHudGlobal();
                  },
                  child: Text("显示全局进度"),
                ),
              ],
            );
          }),
        ),
      ),
    );
  }

  _showLoadingHud(BuildContext context) async {
    ProgressHud.of(context)?.show(ProgressHudType.loading, "正在加载...");
    await Future.delayed(const Duration(seconds: 1));
    _hudKey.currentState?.dismiss();
  }

  _showToast(BuildContext context) async {
    ProgressHud.of(context)?.showToast(text: "${DateTime.now()}");
  }

  _showSuccessHud(BuildContext context) {
    ProgressHud.of(context)
        ?.showAndDismiss(ProgressHudType.success, "加载成功");
  }

  _showErrorHud(BuildContext context) {
    ProgressHud.of(context)?.showAndDismiss(ProgressHudType.error, "加载失败");
  }

  _showProgressHud(BuildContext context) {
    var hud = ProgressHud.of(context);
    hud?.show(ProgressHudType.progress, "正在加载");

    double current = 0;
    Timer.periodic(Duration(milliseconds: 1000.0 ~/ 60), (timer) {
      current += 1;
      var progress = current / 100;
      hud?.updateProgress(progress, "正在加载 $current%");
      if (progress == 1) {
        hud?.showAndDismiss(ProgressHudType.success, "加载成功");
        timer.cancel();
      }
    });
  }

  _showProgressHudGlobal() {
    ProgressHud.show(ProgressHudType.progress, "正在加载");

    double current = 0;
    Timer.periodic(Duration(milliseconds: 1000.0 ~/ 60), (timer) {
      current += 1;
      var progress = current / 100;
      ProgressHud.updateProgress(progress, "正在加载 $current%");
      if (progress == 1) {
        ProgressHud.showAndDismiss(ProgressHudType.success, "加载成功");
        timer.cancel();
      }
    });
  }
}

Global HUD

要创建一个全局的HUD，你需要标记isGlobalHud属性，并且确保在整个应用程序中只有一个全局HUD。它通常定义在MaterialApp之前。

示例代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProgressHud(
      // 标记HUD为全局
      isGlobalHud: true,
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

然后你可以通过静态方法来使用全局HUD：

ProgressHud.showLoading(); // 显示加载HUD
ProgressHud.dismiss(); // 隐藏HUD

ProgressHud.showAndDismiss(ProgressHudType.success, "加载成功"); // 显示并自动隐藏成功HUD
ProgressHud.showAndDismiss(ProgressHudType.error, "加载失败"); // 显示并自动隐藏错误HUD

ProgressHud.show(ProgressHudType.progress, "正在加载"); // 显示进度HUD
ProgressHud.updateProgress(progress, "正在加载 20%"); // 更新进度
ProgressHud.showAndDismiss(ProgressHudType.success, "加载成功"); // 完成后显示成功HUD

总结

通过上述内容，你可以轻松地在Flutter项目中集成和使用bmprogresshud插件，为用户提供更好的交互体验。无论是局部HUD还是全局HUD，都能根据需求灵活配置和使用。希望这些示例代码能帮助你快速上手！