Flutter异步任务管理插件adv_async_widget的使用

Flutter异步任务管理插件adv_async_widget的使用

adv_async_widget

GitHub Pub Version likes Pub Points Pub Popularity

adv_async_widget 是一个用于标准未来和流使用的实用小部件。

新的高级异步构建器

该包包含两个实用类：

AdvFutureBuilder

此类替换标准的 FutureBuilder，允许你根据连接状态具有多个构建方法。

使用示例

标准 FutureBuilder 示例
FutureBuilder<String>(
    future: exampleFuture,
    // 旧的标准构建器，一个方法处理所有情况
    builder: (context, snapshot) {
      if(snapshot.connectionState == ConnectionState.waiting) {
        return CircularProgressIndicator();
      }
      if(snapshot.hasError) {
        return Text("Error: ${snapshot.error}");
      }
      return Text(snapshot.data ?? "No data");
    }
)
AdvFutureBuilder 示例
AdvFutureBuilder<String>(
    future: exampleFuture,
    // 三个不同的方法，每个情况一个
    onWait: (context) => CircularProgressIndicator(),
    onError: (context, error) => Text("Error: $error"),
    onData: (context, data) => Text(data ?? "No data"),
)

AdvStreamBuilder

此类替换标准的 StreamBuilder，允许你根据连接状态具有多个构建方法（是的，它们是一样的，但这个是用于流而不是未来）。

使用示例

标准 StreamBuilder 示例
StreamBuilder<String>(
    stream: exampleStream,
    // 旧的标准构建器，一个方法处理所有情况
    builder: (context, snapshot) {
      if(snapshot.connectionState == ConnectionState.waiting) {
        return CircularProgressIndicator();
      }
      if(snapshot.hasError) {
        return Text("Error: ${snapshot.error}");
      }
      return Text(snapshot.data ?? "No data");
    }
)
AdvStreamBuilder 示例
AdvStreamBuilder<String>(
    stream: exampleStream,
    // 三个不同的方法，每个情况一个
    onWait: (context) => CircularProgressIndicator(),
    onError: (context, error) => Text("Error: $error"),
    onData: (context, data) => Text(data ?? "No data"),
)

完整示例

你可以在 pub 示例标签页 或 GitHub 示例文件中找到完整的 Flutter 示例。

示例代码

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

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

const TITLE = "AdvAsyncWidget Demo";

class MyApp extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {

  late final Future<String> exampleFuture;

  [@override](/user/override)
  void initState() {
    super.initState();
    exampleFuture = Future.delayed(Duration(seconds: 5), () => "FINISHED");
  }

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
    title: TITLE,
    home: Scaffold(
      appBar: AppBar(
        title: Text(TITLE),
      ),
      body: AdvFutureBuilder<String>(
        future: exampleFuture,
        onWait: (context) => CircularProgressIndicator(),
        onData: (context, data) => Text(data!),
      ),
    ),
  );
}

更多关于Flutter异步任务管理插件adv_async_widget的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter异步任务管理插件adv_async_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用Flutter异步任务管理插件adv_async_widget的代码示例。这个插件能够帮助你管理异步任务的状态，比如加载中、成功、失败等，非常适合用于数据加载和网络请求等场景。

首先，确保你已经在pubspec.yaml文件中添加了adv_async_widget依赖：

dependencies:
  flutter:
    sdk: flutter
  adv_async_widget: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个简单的示例，展示如何使用AdvAsyncWidget来管理一个异步任务，比如从网络获取数据：

import 'package:flutter/material.dart';
import 'package:adv_async_widget/adv_async_widget.dart';
import 'dart:async';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AdvAsyncWidget Example'),
        ),
        body: Center(
          child: MyAsyncWidget(),
        ),
      ),
    );
  }
}

class MyAsyncWidget extends StatefulWidget {
  @override
  _MyAsyncWidgetState createState() => _MyAsyncWidgetState();
}

class _MyAsyncWidgetState extends State<MyAsyncWidget> {
  final AsyncValueController<String> _controller = AsyncValueController<String>();

  @override
  void initState() {
    super.initState();
    // 发起异步任务
    _loadData();
  }

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

  void _loadData() {
    _controller.run(() async {
      try {
        // 模拟一个网络请求
        final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/todos/1'));
        if (response.statusCode == 200) {
          return response.body;  // 返回请求到的数据
        } else {
          throw Exception('Failed to load data');
        }
      } catch (e) {
        throw e;  // 抛出异常
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return AdvAsyncWidget<String>(
      controller: _controller,
      loadingBuilder: (context) => CircularProgressIndicator(),
      errorBuilder: (context, error, stackTrace) => Text('Error: $error'),
      successBuilder: (context, data) => Text('Data: $data'),
    );
  }
}

在这个示例中：

  1. AsyncValueController<String>用于管理异步任务的状态和数据。
  2. 在initState方法中，我们调用_loadData方法来发起异步任务。
  3. _loadData方法使用_controller.run来执行异步操作。如果操作成功，返回数据；如果失败，抛出异常。
  4. AdvAsyncWidget根据AsyncValueController的状态来显示不同的UI：
    • loadingBuilder：当异步任务正在进行时显示加载指示器。
    • errorBuilder：当异步任务失败时显示错误信息。
    • successBuilder：当异步任务成功时显示数据。

这个插件非常强大，能够简化异步任务状态管理的代码，让UI更新更加直观和简洁。希望这个示例能够帮助你理解如何使用adv_async_widget插件。

回到顶部