Flutter数据获取与状态管理插件flutter_fetcher_state的使用

Flutter库用于获取数据。

查询（Query）

以下是一个简单的查询类示例，用于获取列表项：

class ListItems extends Query<List<Item>> {
  @override
  Future<List<Item>> fetcher(BuildContext context) {
    // 模拟异步数据获取
    return Future.value([]);
  }

  @override
  Stream<List<Item>> streamBuilder(BuildContext context) {
    // 返回一个空的Stream
    return const Stream.empty();
  }
}

查询构建器（Query Builder）

使用Query.builder来构建UI并处理数据：

Query.builder<List<String>>(
  query: ListItems(), // 使用上面定义的查询类
  builder: (context, controller) {
    // 控制器提供了数据和状态管理功能
    return Text(controller.data?.toString() ?? 'No data');
  },
);

突变（Mutation）

以下是一个简单的突变类示例，用于添加项目：

class AddItemMutation extends Mutation<Item> {
  final Item item;

  AddItemMutation({
    required this.item,
  });

  @override
  Future<Item> mutate(BuildContext context) async {
    // 模拟添加项目的逻辑
    return item;
  }
}

突变构建器（Mutation Builder）

使用Mutation.builder来构建UI并处理突变操作：

Mutation.builder<String>(
  builder: (context, controller) {
    return TextButton(
      child: Text("点击添加"),
      onPressed: () => controller.mutate(
        AddItemMutation(
          item: Item(name: "新项目"), // 创建一个新的项目实例
        ),
      ),
    );
  },
);

更多关于Flutter数据获取与状态管理插件flutter_fetcher_state的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter数据获取与状态管理插件flutter_fetcher_state的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_fetcher_state 是一个用于 Flutter 应用的数据获取与状态管理的插件。它旨在简化数据获取、缓存和状态管理的流程，使开发者能够更轻松地处理异步数据流。以下是如何使用 flutter_fetcher_state 的基本步骤和示例。

1. 安装插件

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

dependencies:
  flutter:
    sdk: flutter
  flutter_fetcher_state: ^0.1.0  # 请使用最新版本

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

2. 基本使用

2.1 创建 Fetcher

Fetcher 是 flutter_fetcher_state 的核心类，用于管理数据获取和状态。你可以通过继承 Fetcher 类来创建自定义的 Fetcher。

import 'package:flutter_fetcher_state/flutter_fetcher_state.dart';

class MyFetcher extends Fetcher<String> {
  @override
  Future<String> fetch() async {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));
    return "Fetched Data";
  }
}

2.2 使用 FetcherBuilder

FetcherBuilder 是一个小部件，用于根据 Fetcher 的状态来构建 UI。它会在数据加载、成功、失败等不同状态下显示不同的内容。

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Fetcher State Example'),
      ),
      body: FetcherBuilder<String>(
        fetcher: MyFetcher(),
        builder: (context, state) {
          if (state.isLoading) {
            return Center(child: CircularProgressIndicator());
          } else if (state.hasError) {
            return Center(child: Text('Error: ${state.error}'));
          } else {
            return Center(child: Text('Data: ${state.data}'));
          }
        },
      ),
    );
  }
}

2.3 触发数据获取

默认情况下，FetcherBuilder 会在小部件首次构建时自动触发数据获取。你也可以手动触发数据获取，例如在用户点击按钮时：

FetcherBuilder<String>(
  fetcher: MyFetcher(),
  builder: (context, state) {
    return Column(
      children: [
        if (state.isLoading)
          CircularProgressIndicator()
        else if (state.hasError)
          Text('Error: ${state.error}')
        else
          Text('Data: ${state.data}'),
        ElevatedButton(
          onPressed: () {
            state.refresh(); // 手动刷新数据
          },
          child: Text('Refresh'),
        ),
      ],
    );
  },
);

3. 高级功能

3.1 缓存

flutter_fetcher_state 支持数据缓存。你可以通过设置 cacheDuration 来指定缓存的有效期。

FetcherBuilder<String>(
  fetcher: MyFetcher(),
  cacheDuration: Duration(minutes: 5), // 缓存5分钟
  builder: (context, state) {
    // ...
  },
);

3.2 依赖注入

你可以使用 FetcherProvider 来在 widget 树中提供 Fetcher 实例，以便在多个小部件之间共享状态。

FetcherProvider(
  create: (context) => MyFetcher(),
  child: MyHomePage(),
);

然后在子 widget 中通过 FetcherBuilder 或 context.fetch 来获取 Fetcher 实例。

FetcherBuilder<String>(
  fetcher: context.fetch<MyFetcher>(),
  builder: (context, state) {
    // ...
  },
);
回到顶部