Flutter状态管理工具插件state_tools的使用

Flutter状态管理工具插件state_tools的使用

State Tools

State Tools 是一个轻量且简单的 Flutter 应用程序状态管理器。

如何简单？

1. 创建你的 StateNotifier 类：

class CounterState extends StateNotifier<int> {
  CounterState() : super(0);
  
  void increment() => state += 1;
}

如果你需要对列表进行特定类型的操作：

class CounterState extends ListStateNotifier<int> {
  CounterState() : super(List.empty());

  void push(int value) => add(value * 2);

  [@override](/user/override)
  bool filter(int value) => value % 2 == 0;
}

你可以为列表应用过滤器（非强制性）。这个过滤器将在每次列表值更改时应用。此外，ListStateNotifier 提供了一些预构建的帮助修饰符，如：

• add(item)
• removeFirst(item)
• addAll([ list of items ])
• removeAll([ list of items ])

2. 在你的小部件中使用 StateBuilder 来与你的 StateNotifier 交互

StateBuilder<int>(
  notifier: counterStateInstance,
  builder: (context, state) => Text('$state')
)

...

FloatingActionButton(
  onPressed: () => counterStateInstance.increment(),
  tooltip: 'Increment',
  child: const Icon(Icons.add),
)

或者，你也可以监听更改并执行与 UI 无关的逻辑：

StateListener<int>(
  notifier: counterStateInstance,
  listener: (context, state) => print('$state'),
  child: const Text('My StateListener')
)

从版本 1.1.0 开始，可以同时构建和监听多个状态，使用 DoubleStateBuilder, DoubleStateListener, TripleStateBuilder 和 TripleStateListener：

DoubleStateBuilder<int, String>(
  notifier1: counterStateInstance,
  notifier2: textStateInstance,
  builder: (context, counter, text) => Text('$counter : $text')
)

...

TripleStateListener<int, String, bool>(
  notifier1: counterStateInstance,
  notifier2: textStateInstance,
  notifier3: boolStateInstance,
  listener: (context, counter, text, boolValue) => print('$counter : $text : $boolValue'),
  child: const Text('My TripleStateListener')
)

想要更多？

如果你想使用 PersistableStateNotifier，你可以这样做：

class CounterState extends PersistableStateNotifier<int> {
  CounterState() : super(0);
     
  void increment() => state += 1;

  [@override](/user/override)
  int fromJson(Map<String, dynamic> json) => json['value'] as int;
  
  [@override](/user/override)
  Map<String, int> toJson(int state) => {'value': state};
}

感兴趣？

在你的应用程序中添加 state_tools 包：

dependencies:
  state_tools: 1.1.1

许可证

Copyright 2024 TMApps

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

完整示例Demo

以下是一个完整的示例代码，展示了如何使用 state_tools 包来管理状态。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:state_tools/state_tools.dart';

import 'injector.dart';
import 'observer.dart';
import 'theme.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  StateUtils.observer = const AppStateObserver();
  PersistableStateNotifier.defaultStorage = await StateStorage.build(
    storageDirectory: kIsWeb
        ? StateStorage.webStorageDirectory
        : await getTemporaryDirectory(),
  );
  runApp(Injector(child: const MyApp()));
}

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

  [@override](/user/override)
  Widget build(BuildContext context) => StateBuilder<ThemeMode>(
        notifier: context.themeStore,
        builder: (BuildContext context, ThemeMode themeMode) => MaterialApp(
          title: 'Flutter - State Manager',
          theme: lightTheme,
          darkTheme: darkTheme,
          themeMode: themeMode,
          home: const MyHomePage(title: 'State Manager - Demo'),
          debugShowCheckedModeBanner: false,
        ),
      );
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
          actions: [
            StateBuilder<ThemeMode>(
              notifier: context.themeStore,
              builder: (context, themeMode) => IconButton(
                  onPressed: () => context.themeStore.switchTheme(),
                  icon: Icon(themeMode == ThemeMode.light
                      ? Icons.mode_night_sharp
                      : Icons.sunny)),
            )
          ],
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text('Count Number:'),
              StateBuilder<int>(
                notifier: context.counterStore,
                // buildWhen: (previous, current) => current % 2 == 0,
                builder: (BuildContext context, int count) => Text(
                  '$count',
                  style: context.theme.textTheme.headlineMedium,
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 32.0),
              child: FloatingActionButton(
                onPressed: () => context.counterStore.decrement(),
                tooltip: 'Decrement',
                child: const Icon(Icons.remove),
              ),
            ),
            FloatingActionButton(
              onPressed: () => context.counterStore.increment(),
              tooltip: 'Increment',
              child: const Icon(Icons.add),
            ),
          ],
        ),
      );
}