Flutter 动态加载插件 with_loader 的使用

with_loader

with_loader 是一个为 Flutter 提供加载功能的插件。只需将你的小部件包裹在 WithLoader 中，并提供所有必要的参数。

特性

• 当你需要在按钮点击时执行 Future 函数时，它可以派上用场。
• 你可以在加载状态下自定义子部件的不透明度。
• 它会通过暴露的 Future 函数的结果来决定函数的 成功 或 失败 条件。
• 根据这个 成功条件，它将在 成功 或 失败 时执行相应的操作。

开始使用

首先，在你的项目 pubspec.yaml 文件中添加 with_loader：

dependencies:
  with_loader: ^0.0.1

然后，在你的 Dart 代码中导入该包：

import 'package:with_loader/with_loader.dart';

使用示例

将任何小部件包裹在 WithLoader<T>() 中：

WithLoader<String>(
  future: () => Future.delayed(const Duration(seconds: 2), () => "Success"),
  successCondition: (result) => result == "Success",
  child: Container(
    decoration: BoxDecoration(
      color: Colors.purple.shade400,
      borderRadius: BorderRadius.circular(50),
    ),
    child: const Padding(
      padding: EdgeInsets.symmetric(
        horizontal: 32.0,
        vertical: 16.0,
      ),
      child: Text(
        "Button",
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
          fontWeight: FontWeight.w500,
        ),
      ),
    ),
  ),
)

一些必需的参数使此小部件工作：

• future: 需要执行的异步任务，返回 Future 对象。
• successCondition: 判断结果是否成功的条件函数。
• child: 在加载时显示的小部件。

示例代码

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

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:with_loader/with_loader.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'With Loader 示例',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: Scaffold(
        body: Center(
          child: WithLoader<String>(
            future: () => Future.delayed(const Duration(seconds: 2), () => "Success"),
            successCondition: (result) => result == "Success",
            loaderAlignment: Alignment.center,
            onSuccess: () {
              if (kDebugMode) {
                print("加载成功");
              }
            },
            onFailure: () {
              if (kDebugMode) {
                print("加载失败");
              }
            },
            child: Container(
              decoration: BoxDecoration(
                color: Colors.purple.shade400,
                borderRadius: BorderRadius.circular(50),
              ),
              child: const Padding(
                padding: EdgeInsets.symmetric(
                  horizontal: 32.0,
                  vertical: 16.0,
                ),
                child: Text(
                  "按钮",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
            loader: CircularProgressIndicator(
              color: Colors.purple.shade600,
            ),
          ),
        ),
      ),
    );
  }
}