Flutter状态管理插件flutter_value_state的使用

flutter_value_state 是一个帮助实现基本状态管理的Dart包，特别适用于BLoC库。它提供了多种状态（如初始状态、加载状态、数据状态和错误状态）来处理数据的获取和刷新。

特性

• 提供了所有必要的数据状态：初始化状态、等待状态、有值/无值状态以及错误状态。
• BaseState.buildWidget 方法可以根据当前状态构建不同的UI组件。WithValueState 参数是必须提供的（第一个参数）。其他未传递的状态将由 ValueStateConfiguration 处理；如果没有配置，则返回一个 SizedBox。
• ValueStateConfiguration 提供了默认的行为来处理 BaseState.buildWidget 中的空参数。

使用示例

下面是一个完整的示例，展示了如何在Flutter应用中使用 flutter_value_state 来进行状态管理。

1. 创建 Cubit 类

import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_value_state/flutter_value_state.dart';

class CounterCubit extends ValueCubit<int> {
  var _value = 0;

  // 模拟从WebService获取数据的过程
  Future<int> _getCounterValueFromWebService() async => _value++;

  Future<void> increment() => perform(() async {
        final result = await _getCounterValueFromWebService();
        emit(ValueState(result));
      });

  void clear() {
    _value = 0;
    emit(const PendingState());
  }
}

2. 设置应用主入口

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_value_state/flutter_value_state.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => CounterCubit(),
      child: MaterialApp(
        title: 'Value Cubit Demo',
        builder: (context, child) => child == null
            ? const SizedBox.shrink()
            : ValueStateConfiguration(
                configuration: ValueStateConfigurationData(
                  builderWaiting: (context, state) =>
                      const Center(child: CircularProgressIndicator()),
                  builderError: (context, state) => Center(
                    child: Text('Expected error.',
                        style: TextStyle(color: Theme.of(context).colorScheme.error)),
                  ),
                  builderNoValue: (context, state) =>
                      const Center(child: Text('No value.')),
                  wrapper: (context, state, child) => AnimatedSwitcher(
                      duration: const Duration(milliseconds: 300),
                      child: child),
                ),
                child: child,
              ),
        home: const MyHomePage(),
      ),
    );
  }
}

3. 构建主页

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

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return BlocBuilder<CounterCubit, BaseState<int>>(builder: (context, state) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo Home Page'),
        ),
        body: DefaultTextStyle(
          style: const TextStyle(fontSize: 24),
          textAlign: TextAlign.center,
          child: state.buildWidget(
              onValue: (context, state, error) => Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        if (state.refreshing) const LinearProgressIndicator(),
                        const Spacer(),
                        if (error != null) error,
                        const Text('Counter value :'),
                        Text(
                          state.value.toString(),
                          style: theme.textTheme.headlineMedium,
                        ),
                        const Spacer(),
                      ]),
              valueMixedWithError: true),
        ),
        floatingActionButton: state is! ReadyState<int>
            ? null
            : FloatingActionButton(
                onPressed: state.refreshing
                    ? null
                    : context.read<CounterCubit>().increment,
                tooltip: 'Increment',
                child: state.refreshing
                    ? SizedBox.square(
                        dimension: 20,
                        child: CircularProgressIndicator(
                            color: theme.colorScheme.onPrimary))
                    : const Icon(Icons.refresh)),
      );
    });
  }
}

这个示例展示了如何使用 flutter_value_state 来管理状态，并根据不同的状态显示不同的UI组件。通过这种方式，可以有效地管理和展示异步操作的不同阶段（如加载、成功或失败）。