Flutter加载状态管理插件loading_provider的使用

loading_provider 是一个用于在Flutter应用中轻松显示加载覆盖层（loading overlays）的插件，并且支持自定义配置。以下是详细的使用方法和示例代码。

安装

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

dependencies:
  flutter:
    sdk: flutter
  loading_provider: ^latest_version

记得替换 ^latest_version 为实际的最新版本号。

使用步骤

1. 导入包

在需要使用的文件中导入 loading_provider 包：

import 'package:loading_provider/loading_provider.dart';

2. 包裹根组件

将你的 MaterialApp 或根组件包裹在 LoadingProvider 中，以初始化加载管理器并提供全局的加载配置：

void main() {
  runApp(
    LoadingProvider(
      appBuilder: (context, builder) => MaterialApp(
        home: const Home(),
        builder: builder,
      ),
      loadings: {  
        'loading1': LoadingConfig(
          backgroundColor: Colors.blue.withOpacity(0.5),
          widget: const Text('Loading'),
        ),
        // 可以添加更多的加载配置
      },
    ),
  );
}

3. 显示加载覆盖层

使用 LoadingBuilder

通过 LoadingBuilder 小部件来显示加载覆盖层：

LoadingBuilder(
  config: const LoadingConfig(), 
  builder: (context, setLoading) {
    return ElevatedButton(
      onPressed: () async {
        setLoading(true); 
        await Future.delayed(Duration(seconds: 2));
        setLoading(false); 
      },
      child: Text('Show Loading'),
    );
  },
);

使用 LoadingWidget

也可以直接使用 LoadingWidget 来显示加载覆盖层：

LoadingWidget(
  isLoading: true,
  config: const LoadingConfig(), 
  child: Text('Loading...'),
);

使用 LoadingController

另外一种方式是通过 LoadingController 控制加载显示：

ElevatedButton(
  onPressed: () async {
    var loading = context.loadingController;
    loading.on(); 
    await Future.delayed(const Duration(seconds: 3));
    loading.off(); 
    loading.on('loading1'); 
    await Future.delayed(const Duration(seconds: 3));
    loading.off(); 
  },
  child: const Text('Loading'),
),

4. 自定义加载样式

你可以通过 LoadingConfig 对象来自定义加载覆盖层的样式：

LoadingConfig(
  backgroundColor: Colors.blue.withAlpha(128),
  widget: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation(Colors.white),
  ),
)

示例Demo

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

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

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

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LoadingProvider(
      appBuilder: (context, builder) => MaterialApp(
        home: const Home(),
        builder: builder,
      ),
      loadings: {
        'load1': LoadingConfig(
          backgroundColor: Theme.of(context).colorScheme.primaryContainer.withOpacity(0.5),
          widget: const Text('Loading'),
        ),
      },
    );
  }
}

class Home extends StatelessWidget {
  const Home({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Text('Hello World!'),
            ElevatedButton(
              onPressed: () async {
                var loading = context.loadingController..on();
                await Future.delayed(const Duration(seconds: 3));
                loading.off();
              },
              child: const Text('Loading'),
            ),
            const Center(
              child: SizedBox(
                height: 100,
                child: LoadingWidget(
                  isLoading: true,
                  child: Text('Loading 1'),
                ),
              ),
            ),
            Center(
              child: SizedBox(
                height: 100,
                child: LoadingBuilder(
                  builder: (context, setLoading) {
                    return ElevatedButton(
                      onPressed: () async {
                        setLoading(true);
                        await Future.delayed(const Duration(seconds: 2));
                        setLoading(false);
                      },
                      child: const Text('Loading 2'),
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}