Flutter异步加载插件df_async_loader的使用

df_async_loader 是一个 Flutter 包，它提供了一个静态方法，用于在执行异步任务时显示加载对话框。它通过提供内置的用户反馈来简化处理异步任务的方式，帮助你在应用程序中无缝管理加载状态。

特性

• 异步任务执行：运行任何异步函数，并在任务执行期间自动显示加载对话框。
• 简单集成：轻松实现到你的 Flutter 项目中，确保在长时间运行的操作期间提供流畅的用户体验。
• 可自定义回调：使用提供的回调在异步任务完成后触发操作。

示例

基础示例

DfAsyncLoader.showLoader<String>(
  context: context,
  callback: () async {
    // 模拟延迟并返回字符串结果。
    await Future.delayed(const Duration(seconds: 2));
    return "RESULT!";
  },
  onFinished: (res) {
    // 当任务完成时，显示包含结果的消息。
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text("CALLED STRING FUNCTION result = $res")),
    );
  },
);

自定义加载小部件示例

DfAsyncLoader.showLoader<EgObject>(
  context: context,
  customBody: const SizedBox(
    height: 12,
    child: LinearProgressIndicator(),
  ),
  callback: () async {
    // 模拟延迟并返回自定义对象。
    await Future.delayed(const Duration(seconds: 2));
    return const EgObject(
      value1: "Value 1",
      value2: false,
    );
  },
  onFinished: (res) {
    // 当任务完成时，显示包含对象值的消息。
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(
          "CALLED OBJECT FUNCTION values = ${res.value1} & ${res.value2}",
        ),
      ),
    );
  },
);

安装

在你的 pubspec.yaml 文件中添加 df_async_loader：

dependencies:
  df_async_loader: ^1.0.0

然后运行：

flutter pub get

使用

调用 DfAsyncLoader.showLoader<T>() 方法，传入你的 context，异步 callback 以及 onFinished 函数以处理任务完成后的结果。

完整示例代码

import 'package:flutter/material.dart';

import '/eg_object.dart';
import 'package:df_async_loader/df_async_loader.dart';

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

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

  /// 示例方法，模拟等待一个 `void` 函数完成的同时显示加载对话框。
  ///
  /// 一旦操作完成，会显示一条消息。
  void _waitForVoidFunction(BuildContext context) {
    DfAsyncLoader.showLoader<void>(
      context: context,
      callback: () async {
        // 模拟延迟以模仿异步任务。
        await Future.delayed(const Duration(seconds: 2));
      },
      onFinished: (_) {
        // 当任务完成时，显示一条消息。
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text("CALLED VOID FUNCTION")),
        );
      },
    );
  }

  /// 示例方法，模拟等待一个 `int` 函数完成的同时显示加载对话框。
  ///
  /// 一旦操作完成，会显示一条包含结果的消息。
  void _waitForIntFunction(BuildContext context) {
    DfAsyncLoader.showLoader<int>(
      context: context,
      callback: () async {
        // 模拟延迟并返回整数结果。
        await Future.delayed(const Duration(seconds: 2));
        return 5;
      },
      onFinished: (res) {
        // 当任务完成时，显示一条包含结果的消息。
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text("CALLED INT FUNCTION result = $res")),
        );
      },
    );
  }

  /// 示例方法，模拟等待一个 `String` 函数完成的同时显示加载对话框。
  ///
  /// 一旦操作完成，会显示一条包含结果的消息。
  void _waitForStringFunction(BuildContext context) {
    DfAsyncLoader.showLoader<String>(
      context: context,
      callback: () async {
        // 模拟延迟并返回字符串结果。
        await Future.delayed(const Duration(seconds: 2));
        return "RESULT!";
      },
      onFinished: (res) {
        // 当任务完成时，显示一条包含结果的消息。
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text("CALLED STRING FUNCTION result = $res")),
        );
      },
    );
  }

  /// 示例方法，模拟等待一个 `EgObject` 完成的同时显示自定义加载对话框。
  ///
  /// 一旦操作完成，会显示一条包含对象值的消息。
  void _waitForObjectFunction(BuildContext context) {
    DfAsyncLoader.showLoader<EgObject>(
      context: context,
      customBody: const SizedBox(
        height: 12,
        child: LinearProgressIndicator(),
      ),
      callback: () async {
        // 模拟延迟并返回自定义对象。
        await Future.delayed(const Duration(seconds: 2));
        return const EgObject(
          value1: "Value 1",
          value2: false,
        );
      },
      onFinished: (res) {
        // 当任务完成时，显示一条包含对象值的消息。
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text(
              "CALLED OBJECT FUNCTION values = ${res.value1} & ${res.value2}",
            ),
          ),
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MaterialApp(
        builder: (ctx, __) => Scaffold(
          body: SizedBox(
            width: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _waitForVoidFunction(ctx);
                  },
                  child: const Text("调用 Void 函数"),
                ),
                const SizedBox(
                  height: 8,
                ),
                ElevatedButton(
                  onPressed: () {
                    _waitForIntFunction(ctx);
                  },
                  child: const Text("调用 Int 函数"),
                ),
                const SizedBox(
                  height: 8,
                ),
                ElevatedButton(
                  onPressed: () {
                    _waitForStringFunction(ctx);
                  },
                  child: const Text("调用 String 函数"),
                ),
                const SizedBox(
                  height: 8,
                ),
                ElevatedButton(
                  onPressed: () {
                    _waitForObjectFunction(ctx);
                  },
                  child: const Text("调用 Object 函数（带自定义加载）"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}