Flutter值管理插件flutter_value的使用

Value

一个轻量级的状态管理解决方案，使用Dart的模式匹配来优雅且类型安全地处理加载、错误和数据状态。

由 p4-k4 创建。

特性

• 🎯 类型安全的状态管理
• 🔄 内置的加载状态处理
• ⚠️ 优雅的错误状态管理
• 🎨 清晰简单的API
• 📦 最小化样板代码
• 🔍 适合模式匹配
• 🎭 使用状态文件实现关注点分离

安装

在 pubspec.yaml 中添加 value：

dependencies:
  value: ^0.0.1

使用

基本示例

创建一个 Value 实例：

// 创建一个 Value 实例
final counter = Value<int>(0);

// 更新值
counter.setValue(42);
counter.notify();

// 使用模式匹配访问值
switch (counter.last) {
  case Data(value: final v):
    print('当前值: $v');
  case Waiting():
    print('加载中...');
  case Error(error: final e):
    print('错误: $e');
  case NoData():
    print('无数据可用');
}

完整计数器示例

以下是一个完整的计数器示例，展示如何在 Flutter 中使用 Value：

state.dart

import 'package:value/value.dart';

final counter = Value<int>(0);

void incrementCounter() {
  if (counter.lastKnownValue case final value?) {
    counter.setValue(value + 1);
    counter.notify();
  }
}

void decrementCounter() {
  if (counter.lastKnownValue case final value?) {
    counter.setValue(value - 1);
    counter.notify();
  }
}

void resetCounter() {
  counter.setValue(0);
  counter.notify();
}

main.dart

import 'package:flutter/material.dart';
import 'package:value/value.dart';
import 'state.dart' as app_state;

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Subscriber(
      (context) => Column(
        children: [
          Text(
            switch (app_state.counter.last) {
              Data(value: final v) => '$v',
              _ => '0',
            },
          ),
          Row(
            children: [
              FilledButton(
                onPressed: app_state.decrementCounter,
                child: Text('减少'),
              ),
              FilledButton(
                onPressed: app_state.resetCounter,
                child: Text('重置'),
              ),
              FilledButton(
                onPressed: app_state.incrementCounter,
                child: Text('增加'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

异步操作处理

Value 可以轻松处理异步操作，并内置了加载和错误状态：

final userProfile = Value<UserProfile>();

Future<void> fetchProfile() async {
  userProfile.setWaiting();
  userProfile.notify();
  
  try {
    final profile = await api.fetchUserProfile();
    userProfile.setValue(profile);
  } catch (e, s) {
    userProfile.setError(e, s);
  }
  userProfile.notify();
}

// 在你的widget中
Subscriber(
  (context) => switch (userProfile.last) {
    Data(value: final profile) => ProfileView(profile),
    Waiting() => CircularProgressIndicator(),
    Error(error: final e) => Text('错误: $e'),
    NoData() => Text('无用户资料数据'),
  },
)