Flutter状态管理插件state_store的使用

简介

state_store 是一个简单的状态管理包，用于Flutter应用。它允许你跨应用维护状态，并为小部件提供状态感知构建器。

特点

• 跨应用维护状态
• 状态感知构建器用于小部件
• 可配置的持久化
• 监听器的通知
• 远程状态观察器应用用于调试

使用方法

你可以通过以下步骤来使用 state_store：

步骤1：设置状态变量

首先，你需要设置所有需要初始值的状态变量，或者标记为持久化的变量。你也可以定义更复杂的值的导入和导出。

/// 设置状态变量
StateStore.setUp<int>('main.counter', 0, true); // 设置整数类型的初始值
StateStore.setUp<String>('main.text', 'Tiger blood', true); // 设置字符串类型的初始值
StateStore.setUp<Complex>('other.complex', Complex.demo(), true); // 设置复杂对象类型的初始值
StateStore.setUp<TestEnum>('other.other.enum', TestEnum.one, false); // 设置枚举类型的初始值

步骤2：导入持久化的值

使用 import 方法来获取所有已持久化的值。

await StateStore.import();

步骤3：在UI中使用状态感知构建器

使用 StateStoreBuilder 小部件来处理UI中的值变化。

/// 在UI中使用状态感知构建器
StateStoreBuilder(
  id: 'main.counter', // 状态变量的ID
  builder: (context, value) => Text(
    '$value', // 显示状态变量的值
    style: Theme.of(context).textTheme.headlineMedium,
  ),
),

步骤4：更新状态变量

使用 dispatch 方法来更新状态变量。所有监听器和构建器将被通知并更新。

void _incrementCounter() {
  StateStore.dispatch('main.counter', StateStore.get('main.counter') + 1);
}

步骤5：连接远程调试

如果需要使用外部状态调试器，可以启用远程调试功能。这需要socket连接权限。

if (kDebugMode) {
  await StateStore.connectRemoteDebugging(toEncodable: (object) {
    if (object is Enum) return object.name;
    return const JsonEncoder().convert(object);
  });
}

完整示例代码

以下是完整的示例代码，展示了如何使用 state_store 包。

import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:state_store/state_store.dart';

import 'example_complex.dart';

enum TestEnum { one, two, three }

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  /// Step 1: 设置状态变量
  StateStore.setUp<int>('main.counter', 0, true);
  StateStore.setUp<String>('main.text', 'Tiger blood', true);
  StateStore.setUp<Complex>('other.complex', Complex.demo(), true);
  StateStore.setUp<TestEnum>('other.other.enum', TestEnum.one, false);

  /// Step 2: 导入持久化的值
  await StateStore.import();

  /// Step 5: 连接远程调试
  if (kDebugMode) {
    await StateStore.connectRemoteDebugging(toEncodable: (object) {
      if (object is Enum) return object.name;
      return const JsonEncoder().convert(object);
    });
  }

  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  void _incrementCounter() {
    /// Step 4: 更新状态变量
    StateStore.dispatch('main.counter', StateStore.get('main.counter') + 1);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            /// Step 3: 在UI中使用状态感知构建器
            StateStoreBuilder(
              id: 'main.counter',
              builder: (context, value) => Text(
                '$value',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
            const SizedBox(height: 20),
            const Text(
              'Random text',
            ),
            const SizedBox(height: 10),
            StateStoreBuilder<String?>(
              id: 'main.text',
              builder: (context, value) => Text(
                value ?? '',
                style: Theme.of(context)
                    .textTheme
                    .titleLarge!
                    .apply(color: Colors.amber),
              ),
            ),
            const SizedBox(height: 20),
            const Text(
              'Complex',
            ),
            const SizedBox(height: 10),
            StateStoreBuilder<Complex?>(
              id: 'other.complex',
              builder: (context, value) => Column(
                children: [
                  Text(
                    value?.id ?? '-',
                    style: Theme.of(context)
                        .textTheme
                        .titleLarge!
                        .apply(color: Colors.amber),
                  ),
                  Text(
                    value?.name ?? '-',
                    style: Theme.of(context)
                        .textTheme
                        .titleLarge!
                        .apply(color: Colors.amber),
                  ),
                  Text(
                    value?.description ?? '-',
                    style: Theme.of(context)
                        .textTheme
                        .titleLarge!
                        .apply(color: Colors.amber),
                  ),
                  Text(
                    value?.numbers.toString() ?? '-',
                    style: Theme.of(context)
                        .textTheme
                        .titleLarge!
                        .apply(color: Colors.amber),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}