Flutter应用加载覆盖层插件 overlay_loader_with_app_icon 的使用

overlay_loader_with_app_icon 是一个轻量级的Flutter包，它在发起异步调用时显示带有应用程序图标（app icon）的漂亮加载覆盖层。这个插件非常适合用于展示加载状态或处理用户交互期间的操作。

Demo App

Getting Started

添加依赖到 pubspec.yaml

首先，在你的 pubspec.yaml 文件中添加对 overlay_loader_with_app_icon 包的依赖：

dependencies:
  ...
  overlay_loader_with_app_icon:

然后运行 flutter pub get 来安装该包。

导入库

在需要使用的Widget文件中导入该库：

import 'package:overlay_loader_with_app_icon/overlay_loader_with_app_icon.dart';

Usage 使用方法

要在一个异步调用过程中显示带有应用图标的进度指示器，只需将 OverlayLoaderWithAppIcon 包装在任何小部件周围，并通过 _loading 布尔变量来启用或禁用进度加载器。

下面是一个完整的示例代码，展示了如何集成和使用这个插件：

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

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

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

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  TextEditingController emailController = TextEditingController();
  TextEditingController password/XMLSchemaController = TextEditingController();

  bool _isLoading = false;

  void loadStateForSeconds() {
    setState(() {
      _isLoading = true; // 启动模态进度HUD
    });

    Future.delayed(Duration(seconds: 2), () {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Login successfully', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
            Text('${emailController.text}', style: TextStyle(color: Colors.white)),
          ],
        ),
        backgroundColor: Colors.blue,
      ));
      setState(() {
        _isLoading = false; // 关闭模态进度HUD
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return OverlayLoaderWithAppIcon(
      isLoading: _isLoading,
      overlayBackgroundColor: Colors.black,
      circularProgressColor: Color(0xff670099),
      appIcon: Image.asset('images/appIcon.png'),
      child: Scaffold(
        appBar: AppBar(title: Text("Overlay loader with app icon")),
        body: Form(
          key: _formKey,
          autovalidateMode: AutovalidateMode.always,
          child: Padding(
            padding: EdgeInsets.all(8.0),
            child: _buildColumn(),
          ),
        ),
      ),
    );
  }

  Column _buildColumn() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        TextFormField(
          controller: emailController,
          textInputAction: TextInputAction.next,
          decoration: InputDecoration(border: UnderlineInputBorder(), hintText: "Enter Email"),
        ),
        SizedBox(height: 20),
        TextFormField(
          controller: passwordController,
          obscureText: true,
          decoration: InputDecoration(border: UnderlineInputBorder(), hintText: "Enter Password"),
        ),
        SizedBox(height: 20),
        ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                loadStateForSeconds();
              }
            },
            child: Text("Login"))
      ],
    );
  }
}

More Options 更多选项

你可以根据需要自定义构造函数中的参数：

OverlayLoaderWithAppIcon({
  required this.isLoading,
  required this.child,
  required this.appIcon,
  this.appIconSize = 50,
  this.borderRadius = 15,
  this.overlayOpacity = 0.5,
  this.circularProgressColor,
  this.overlayBackgroundColor,
});

以上就是关于 overlay_loader_with_app_icon 插件的基本介绍和使用示例。希望这对你有所帮助！如果有更多功能需求，请考虑提交issue进行讨论。😊🙏🏻