Flutter模糊背景加载提示插件blurry_modal_progress_hud的使用

简介

blurry_modal_progress_hud 是 modal_progress_hud 的克隆和升级版本。它提供了一个简单的 widget 包装，用于在执行异步调用时显示模态进度指示器（即 HUD，heads up display）。与原始版本不同的是，它添加了模糊效果，使用户界面更加美观。

安装

首先，在你的 pubspec.yml 文件中添加 blurry_modal_progress_hud 依赖：

dependencies:
  blurry_modal_progress_hud: ^1.1.1

然后，在 Dart 文件中导入该包：

import 'package:blurry_modal_progress_hud/blurry_modal_progress_hud.dart';

使用方法

BlurryModalProgressHUD 可以包裹任何需要执行异步调用的 widget，以便在调用过程中显示一个模态进度指示器。你可以通过设置 inAsyncCall 参数来控制进度指示器的显示或隐藏。此外，你还可以自定义模糊效果的强度、进度指示器样式、模态屏障的颜色和透明度等。

示例代码

以下是一个完整的示例应用程序，展示了如何使用 blurry_modal_progress_hud 插件：

import 'package:flutter/material.dart';
import 'package:blurry_modal_progress_hud/blurry_modal_progress_hud.dart';
import 'package:flutter_spinkit/flutter_spinkit.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: LandingPage(),
    );
  }
}

class LandingPage extends StatefulWidget {
  const LandingPage({Key? key}) : super(key: key);

  @override
  _LandingPageState createState() => _LandingPageState();
}

class _LandingPageState extends State<LandingPage> {
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();
  bool isLoading = false;

  @override
  Widget build(BuildContext context) {
    return BlurryModalProgressHUD(
      inAsyncCall: isLoading,
      blurEffectIntensity: 4, // 模糊效果强度
      progressIndicator: SpinKitFadingCircle(
        color: Colors.purple,
        size: 90.0,
      ), // 自定义进度指示器
      dismissible: false, // 是否可点击外部关闭
      opacity: 0.4, // 模态屏障透明度
      color: Colors.black.withOpacity(0.97), // 模态屏障颜色
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          automaticallyImplyLeading: false,
          elevation: 0,
          centerTitle: true,
          title: Text(
            'SIGN IN',
            style: TextStyle(
              fontSize: 24,
              color: Colors.black,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(height: 40),
              LabelText(labelValue: 'Email'),
              CustomTextField(
                controller: emailController,
                hintText: 'email',
                keyboardType: TextInputType.emailAddress,
              ),
              LabelText(labelValue: 'Password'),
              CustomTextField(
                controller: passwordController,
                hintText: 'password',
                keyboardType: TextInputType.name,
              ),
              Container(
                height: 50,
                width: 300,
                margin: EdgeInsets.symmetric(vertical: 20),
                child: TextButton(
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.purple,
                    elevation: 4,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                  ),
                  onPressed: () async {
                    setState(() {
                      isLoading = true;
                    });

                    await Future.delayed(Duration(seconds: 3), () {
                      setState(() {
                        isLoading = false;
                      });
                    });
                  },
                  child: Text(
                    'Login',
                    style: TextStyle(
                      color: Colors.white,
                      fontFamily: 'LibreBaskerville',
                      fontSize: 20,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 辅助类，模拟自定义文本输入框和标签文本
class CustomTextField extends StatelessWidget {
  final TextEditingController controller;
  final String hintText;
  final TextInputType keyboardType;

  CustomTextField({
    required this.controller,
    required this.hintText,
    required this.keyboardType,
  });

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      decoration: InputDecoration(hintText: hintText),
      keyboardType: keyboardType,
    );
  }
}

class LabelText extends StatelessWidget {
  final String labelValue;

  LabelText({required this.labelValue});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(
        labelValue,
        style: TextStyle(fontSize: 18),
      ),
    );
  }
}

选项

以下是 BlurryModalProgressHUD 构造函数中可以自定义的参数：

• inAsyncCall: 控制是否显示进度指示器。
• opacity: 设置模态屏障的透明度，默认为 0.3。
• color: 设置模态屏障的颜色，默认为灰色。
• blurEffectIntensity: 设置模糊效果的强度，默认为 1.0。
• progressIndicator: 进度指示器，默认为 CircularProgressIndicator，可以替换为其他类型的 widget。
• offset: 进度指示器的位置偏移，默认居中。
• dismissible: 是否可以通过点击模态屏障外部关闭，默认为 false。
• child: 需要包裹的子 widget。

更多详细信息可以参考 GitHub 项目 中的完整示例。

联系方式

如果你有任何问题或建议，可以通过电子邮件联系作者：edinjoey@gmail.com。

希望这个插件能帮助你在 Flutter 应用中实现更美观的加载提示效果！