Flutter未来任务管理插件future_manager的使用

FutureManager

FutureManager 是一个类似于 ValueNotifier 和 ValueListenableBuilder 的库，但它用于处理异步值。它可以帮助开发者更方便地管理和响应 Future 类型的数据变化。

安装

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

dependencies:
  future_manager: ^1.11.0

使用场景和动机

当你需要从 API 获取数据或处理会反映到 UI 的 Future 函数时，通常可以使用 setState 或 FutureBuilder 来处理这种情况。但是这两种方法都会创建样板代码，并且缺乏一些功能，如刷新、事件回调等。而 FutureManager 提供了一种解决方案，主要关注 Future 值的三个状态：加载中（Loading）、错误（Error） 和 完成（Done），你可以通过 FutureManagerBuilder 来处理这些状态并更新 UI。

简短示例

下面是一个简短的示例，展示了如何使用 FutureManager 来管理异步数据：

FutureManager<int> dataManager = FutureManager();

@override
void initState() {
  dataManager.execute(() => Future.value(2));
  super.initState();
}

@override
void dispose() {
  dataManager.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return FutureManagerBuilder<int>(
    futureManager: dataManager,
    ready: (context, data) {
      return ElevatedButton(
        child: Text("My data: $data"),
        onPressed: () {
          dataManager.refresh();
        },
      );
    },
  );
}

FutureManager 属性与字段

方法

FutureManagerBuilder

FutureManagerBuilder 是一个用于构建 UI 的小部件，可以根据 FutureManager 的状态来显示不同的 UI 元素。

示例

以下是一个完整的示例，展示了如何使用 FutureManagerBuilder 来管理异步数据并在 UI 中展示：

class _HomePageState extends State<NewPage> {

  FutureManager<int> dataManager = FutureManager();
  
  @override
  void initState() {
    dataManager.execute(() async {
      await Future.delayed(Duration(seconds: 2));
      // 将 10 添加到 dataManager 中
      return 10;
    });
    super.initState();
  }

  @override
  void dispose() {
    dataManager.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 使用 FutureManagerBuilder 构建 UI
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              // 再次调用 execute
              dataManager.refresh();
            },
          )
        ]
      ),
      body: FutureManagerBuilder<int>(
        futureManager: dataManager,
        error: (error) => YourErrorWidget(),
        loading: YourLoadingWidget(),
        ready: (context, data) {
          // 结果: My data: 10
          return Text("My data: ${data}");
        }
      ),
    );
  }
}

文档

生态系统和使用

• 何时使用 cacheOption？
  • 当你有一个全局的 Manager 并希望在一段时间内保留数据而不重新执行 execute 逻辑或 futureFunction。
• 何时使用 ManagerProvider？
  • 当你需要在一个非全局范围内跨多个小部件使用 FutureManager 时，而不是将其声明为全局变量。这样做时，FutureManager 将在首次使用时自动销毁并重新创建，类似于 RiverPod 的 autoDispose 功能。

完整示例代码

以下是一个完整的应用示例，展示了如何结合 FutureManagerProvider 和 FutureManager 来构建一个简单的 Flutter 应用程序：

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

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

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

  @override
  Widget build(BuildContext context) {
    return FutureManagerProvider(
      onFutureManagerError: (error, context) {
        print("On FutureManager error called: $error");
      },
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Future Manager Example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(
          dataManager: () => FutureManager(
            reloading: true,
            cacheOption: const ManagerCacheOption.non(),
          ),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final FutureManager Function() dataManager;

  const MyHomePage({Key? key, required this.dataManager}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  late FutureManager<int> _dataManager;

  @override
  void initState() {
    _dataManager = widget.dataManager();
    _dataManager.execute(() async {
      await Future.delayed(Duration(seconds: 2));
      return 10;
    });
    super.initState();
  }

  @override
  void dispose() {
    _dataManager.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Future Manager Example'),
        actions: [
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              _dataManager.refresh();
            },
          )
        ],
      ),
      body: FutureManagerBuilder<int>(
        futureManager: _dataManager,
        loading: Center(child: CircularProgressIndicator()),
        error: (error) => Center(child: Text('Error: $error')),
        ready: (context, data) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  "My data: $data",
                  style: Theme.of(context).textTheme.headline4,
                ),
                ElevatedButton(
                  onPressed: () {
                    _dataManager.refresh();
                  },
                  child: Text('Refresh Data'),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

这个示例展示了如何使用 FutureManager 和 FutureManagerBuilder 来管理异步数据，并根据数据的状态动态更新 UI。此外，还展示了如何使用 FutureManagerProvider 来提供全局的错误处理机制。