Flutter加载覆盖层插件flutter_loading_overlay的使用

Flutter加载覆盖层插件flutter_loading_overlay的使用

FlutterLoadingOverlay 提供了一种简单且灵活的方式来管理 Flutter 应用中的加载覆盖层。无需繁琐的上下文传递或重复代码！通过全局获取器，您可以轻松地使用 startLoading 和 stopLoading 开始和停止加载覆盖层，无需添加括号。此外，您还可以轻松自定义覆盖层的外观。

✨ 特性

• 全局访问：使用 startLoading 和 stopLoading 全局访问，无需调用它们为方法。
• 无需上下文：无需传递 BuildContext；该包会为您处理。
• 可定制覆盖层：更改覆盖层的不透明度、颜色，甚至可以传递一个自定义小部件以完全控制其外观。
• 手势支持：轻松添加自己的 GestureDetector 或使用默认的加载动画，无需麻烦。
• 最小化设置：使用单行代码即可启动和停止加载覆盖层。

💡 安装

在您的 pubspec.yaml 文件中包含以下内容以将此包添加到项目中：

dependencies:
  flutter_loading_overlay: ^latest

然后运行：

flutter pub get

🎉 快速开始

忘记手动管理上下文或复杂的加载动画。使用 FlutterLoadingOverlay，只需调用 startLoading 和 stopLoading —— 不需要添加括号！

1. 基本示例

这是使用 FlutterLoadingOverlay 的最简单方式。触发时，它会自动显示一个简单的非交互式加载动画。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

    // 初始化覆盖层并设置默认值
    FlutterLoadingOverlay().init(navigatorKey: navigatorKey);

    return MaterialApp(
      navigatorKey: navigatorKey,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('加载覆盖层示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 调用 startLoading，无需括号
              startLoading;
              
              Future.delayed(const Duration(seconds: 2), () {
                // 调用 stopLoading，无需括号
                stopLoading;
              });
            },
            child: const Text('显示加载覆盖层'),
          ),
        ),
      ),
    );
  }
}

2. 自定义不透明度和覆盖层颜色

您可以自定义覆盖层背景的不透明度和颜色，以适应您的应用主题。以下是实现方法：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

    // 使用自定义不透明度和颜色初始化
    FlutterLoadingOverlay().init(
      navigatorKey: navigatorKey,
      opacity: 0.8, // 自定义不透明度
      overlayColor: Colors.blue.withOpacity(0.5), // 自定义覆盖层颜色
    );

    return MaterialApp(
      navigatorKey: navigatorKey,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('自定义加载覆盖层示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 调用 startLoading，无需括号
              startLoading;
              
              Future.delayed(const Duration(seconds: 2), () {
                // 调用 stopLoading，无需括号
                stopLoading;
              });
            },
            child: const Text('显示自定义加载覆盖层'),
          ),
        ),
      ),
    );
  }
}

3. 高级示例（带有 GestureDetector）

对于更高级的用例，FlutterLoadingOverlay 允许您传递一个自定义小部件，如 GestureDetector，并处理各种手势，例如点击、双击或长按。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

    // 使用自定义 GestureDetector 小部件初始化
    FlutterLoadingOverlay().init(
      navigatorKey: navigatorKey,
      customChild: GestureDetector(
        onTap: () => print('覆盖层被点击！'),
        onDoubleTap: () => print('覆盖层被双击！'),
        onLongPress: () => print('覆盖层被长按！'),
        child: const CircularProgressIndicator(),
      ),
    );

    return MaterialApp(
      navigatorKey: navigatorKey,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('带有手势检测器的加载覆盖层'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              startLoading; // 启动覆盖层
              Future.delayed(const Duration(seconds: 2), () {
                stopLoading; // 停止覆盖层
              });
            },
            child: const Text('显示加载覆盖层'),
          ),
        ),
      ),
    );
  }
}

📚 API 参考

init 方法

void init({
  required GlobalKey<NavigatorState> navigatorKey,
  Widget? customChild,
  double opacity = 0.5,
  Color overlayColor = Colors.black,
})