Flutter项目创建辅助插件creator的使用

简介

Creator 是一个状态管理库，它使得业务逻辑代码简洁、流畅、易读且易于测试。通过 Creator，您可以安全地读取和更新状态，并编写干净且可测试的业务逻辑。

快速开始

安装

在您的 pubspec.yaml 文件中添加 Creator：

dependencies:
  creator: ^最新版本号

然后运行以下命令来安装依赖：

dart pub add creator

使用示例

基本用法

创建和更新状态

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

void main() {
  runApp(CreatorGraph(child: const MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

final counter = Creator.value(0);

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Column(
        children: [
          // Watcher 将在 counter 变化时重新构建
          Watcher((context, ref, _) => Text('${ref.watch(counter)}')),
          TextButton(
            // 更新状态非常简单
            onPressed: () => context.ref.update<int>(counter, (count) => count + 1),
            child: const Text('+1'),
          ),
        ],
      ),
    );
  }
}

处理异步数据

// repo.dart

// 模拟调用后端服务获取温度
Future<int> getFahrenheit(String city) async {
  await Future.delayed(const Duration(milliseconds: 100));
  return 60 + city.hashCode % 20;
}

// logic.dart

// 简单的 creators 绑定到 UI
final cityCreator = Creator.value('London');
final unitCreator = Creator.value('Fahrenheit');

// 使用方法如 map, where 等编写流畅代码
final fahrenheitCreator = cityCreator.asyncMap(getFahrenheit);

// 结合 creators 进行业务逻辑处理
final temperatureCreator = Emitter<String>((ref, emit) async {
  final f = await ref.watch(fahrenheitCreator);
  final unit = ref.watch(unitCreator);
  emit(unit == 'Fahrenheit' ? '$f F' : '${f2c(f)} C');
});

// 华氏转摄氏度转换器
int f2c(int f) => ((f - 32) * 5 / 9).round();

// main.dart

class TemperaturePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Temperature')),
      body: Center(
        child: Watcher((context, ref, _) =>
            Text(ref.watch(temperatureCreator.asyncData).data ?? 'loading')),
      ),
    );
  }
}

更多功能

• 监听变化：使用 watch(someCreator.change) 获取 Change<T> 对象。
• 命名：为 creators 设置名称以便于日志记录。
• 保持活跃：使用 keepAlive 参数保持 creator 的活跃状态。
• 扩展方法：使用 map, where, reduce 等方法简化代码。
• 错误处理：自然地处理错误并在需要的地方进行重试等操作。
• 测试：轻松编写测试用例，结合 watch, read, set 方法。

示例项目

简单计数器应用

DartPad链接

天气应用

DartPad链接

新闻应用

DartPad链接

最佳实践

• 将代码拆分为 repo 文件（后端服务调用）、logic 文件（creator）和 UI 文件（widget）。
• 保持 creator 小巧以提高可测试性，将派生状态放在派生的 creators 中（使用 map, where 等）。

总结

Creator 提供了一种简洁且强大的方式来管理 Flutter 应用的状态。希望您喜欢使用 Creator，并欢迎反馈和贡献！

以上是关于 Flutter 项目创建辅助插件 Creator 的使用指南。如果您有任何问题或需要进一步的帮助，请随时提问！