Flutter插件flowner的介绍与使用

Flutter插件flowner的介绍与使用

Flowner - 一个轻量级的Flutter状态管理解决方案

Flowner 是一个极简、高效且直观的状态管理库，专为Flutter开发者设计。它以简洁性和性能为核心构建，提供了强大的工具来有效地管理Flutter应用中的状态，而无需依赖第三方状态管理解决方案。

无论您是在开发小型应用还是大规模应用程序，Flowner 都能通过其强大且易于使用的API适应您的需求。

✨ 特性

• 基于流的状态管理：仅在相关状态发生变化时更新UI组件。
• 支持复杂状态：可以处理嵌套结构，如列表、映射和自定义对象。
• 异步状态更新：内置对基于Future的状态更新的支持，轻松管理异步操作。
• 内存安全：通过简单的 dispose 方法防止内存泄漏。
• 轻量级：无外部依赖，仅使用纯Dart。

🚀 开始使用

安装

将插件添加到项目的 pubspec.yaml 文件中：

dependencies:
  flowner: ^1.0.0

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

flutter pub get

🔧 使用方法

创建和更新状态

import 'package:flowner/flowner.dart';

void main() {
  // 初始化具有默认值的状态
  final counterState = State<int>(0);

  // 监听状态变化
  counterState.stream.listen((newValue) {
    print('Counter updated: $newValue');
  });

  // 同步更新状态
  counterState.value = 1;  // 输出: Counter updated: 1

  // 异步更新状态
  counterState.updateAsync(() async {
    await Future.delayed(Duration(seconds: 2));
    return 42;
  }).then((_) {
    print('Counter updated: ${counterState.value}');  // 输出: Counter updated: 42
  });
}

清理状态

为了避免内存泄漏，在状态不再需要时调用 dispose 方法：

state.dispose();

📱 示例应用

要查看 flowner 的实际效果，可以检查以下示例项目：

示例代码

🌟 关键API方法

🛠️ 贡献

我们欢迎贡献！如果您有功能建议、错误修复或改进建议，请随时提交问题或拉取请求。

🐞 问题反馈

请在以下链接中报告问题或提供反馈：

问题提交

📜 许可证

本项目采用 MIT 许可证。

示例代码详解

以下是完整的示例代码，展示如何使用 flowner 进行状态管理：

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

const counterStateId = 'counter';

// 模拟从API获取数据的方法
Future<int> fetchCounterFromApi() async {
  await Future.delayed(const Duration(seconds: 2)); // 模拟延迟
  return 42; // 返回API数据
}

void main() {
  // 创建计数器状态
  Flowner.createState<int>(counterStateId, 0);

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final counter = Flowner.getState<int>(counterStateId);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flowner Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用FlowBuilder显示计数器值
              FlowBuilder<int>(
                stateId: counterStateId,
                builder: (context, value) {
                  return Text('Counter: $value', style: const TextStyle(fontSize: 24));
                },
              ),
              const SizedBox(height: 20),

              // 同步增加计数器
              ElevatedButton(
                onPressed: () {
                  counter?.value++;
                },
                child: const Text('Increment by 1 (sync)'),
              ),
              const SizedBox(height: 20),

              // 异步获取计数器值
              ElevatedButton(
                onPressed: () async {
                  await counter?.updateAsync(() async {
                    final newValue = await fetchCounterFromApi(); // 异步更新
                    return newValue;
                  });
                },
                child: const Text('Fetch Counter (async)'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}