Flutter异步构建插件simple_async_builder的使用

Flutter异步构建插件simple_async_builder的使用

simple_async_builder 是一个用于 Flutter 的简单异步构建器插件。它提供了 AsyncFutureBuilder 和 AsyncStreamBuilder，这些组件比 Flutter 原生的 FutureBuilder 和 StreamBuilder 更加开发者友好。

简介

该插件的目的是简化处理异步操作时的 UI 构建。通过提供一些默认配置，使得在处理异步数据时更加方便。

安装

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

dependencies:
  simple_async_builder: ^最新版本号

然后运行 flutter pub get 来获取新安装的包。

使用方法

基本用法

下面是一个简单的例子，展示了如何使用 AsyncFutureBuilder 构建一个等待两秒后返回结果的按钮点击计数器：

AsyncFutureBuilder<int>(
  future: Future<int>.delayed(const Duration(seconds: 2), () => 3),
  builder: (context, value) => Text("Button was clicked $value times"),
)

这将生成以下效果：

同样的效果也可以通过 Flutter 的原生 FutureBuilder 实现：

FutureBuilder<int>(
  future: Future<int>.delayed(const Duration(seconds: 2), () => 3),
  builder: (context, snapshot) {
    switch(snapshot.connectionState) {
      case ConnectionState.none:
        return Text("Error");
      case ConnectionState.waiting:
        return CircularProgressIndicator();
      case ConnectionState.active:
      case ConnectionState.done:
        return Center(child: Text('Button was clicked ${snapshot.data ?? 0} times'));
    }
  }
);

高级用法

你可以自定义 AsyncFutureBuilder 的各个部分，例如等待状态、错误处理等。以下是一个更复杂的例子：

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final futureClickCount = Future<int>.delayed(const Duration(seconds: 2), () => 3);
    return Scaffold(
      appBar: AppBar(title: const Text('Example')),
      body: AsyncFutureBuilder<int>(
        future: futureClickCount,
        waiting: (context) => Row(children: [CircularProgressIndicator(), Text("Loading...")],),
        builder: (context, value) => Center(child: Text('Button was clicked $value times')),
        error: (context, error, stack) => Text("Ups, something went wrong... $error"),
        reportError: (errorDetail) => reportToFirebase(errorDetail.exception.toString()),
      ),
    );
  }

  void reportToFirebase(Object error) {
    debugPrint(error.toString());
  }
}

在这个例子中：

• waiting 参数指定了在等待异步操作完成时显示的内容。
• builder 参数用于处理异步操作成功后的结果显示。
• error 参数用于处理异步操作失败时显示的内容。
• reportError 参数用于报告错误，这里将其发送到 Firebase 进行进一步分析。

完整示例

以下是完整的示例代码，展示了如何在一个应用中使用 AsyncFutureBuilder 和 AdvancedWidget：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(home: ExampleWidget());
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final futureClickCount = Future<int>.delayed(const Duration(seconds: 2), () => 3);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: AsyncFutureBuilder<int>(
        future: futureClickCount,
        builder: (context, value) => Center(child: Text('Button was clicked $value times')),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final futureClickCount = Future<int>.delayed(const Duration(seconds: 2), () => 3);
    return Scaffold(
      appBar: AppBar(title: const Text('Example')),
      body: AsyncFutureBuilder<int>(
        future: futureClickCount,
        waiting: (context) => Row(children: [CircularProgressIndicator(), Text("Loading...")],),
        builder: (context, value) => Center(child: Text('Button was clicked $value times')),
        error: (context, error, stack) => Text("Ups, something went wrong... $error"),
        reportError: (errorDetail) => reportToFirebase(errorDetail.exception.toString()),
      ),
    );
  }

  void reportToFirebase(Object error) {
    debugPrint(error.toString());
  }
}