Flutter状态管理插件statescope的使用

Flutter状态管理插件statescope的使用

StateScope

StateScope 是 Simple State Management 的一个分支。它利用了 InheritedNotifier 来实现非常简单的状态管理。

特点

• 极其容易使用。
• 轻量且性能良好。
• 惰性创建状态。

使用方法

首先，你需要将状态存储在一个扩展了 ChangeNotifier 的类中：

class Counter extends ChangeNotifier {
  int count = 0;

  void countUp() {
    count++;
    notifyListeners(); // 通知所有监听者状态已更改
  }
}

然后，将这个类放入 StateScope 的 creator 中：

StateScope(
  creator: () => Counter(), // 创建一个新的Counter实例
  child: Builder(
    builder: (context) {
      // 使用watch()来监听状态变化并重建widget
      final counter = context.watch<Counter>();
      return Column(
        children: [
          Text('${counter.count}'), // 显示当前计数
          ElevatedButton(
            onPressed: () {
              // 使用read()来获取状态但不重建widget
              context.read<Counter>().countUp();
            },
            child: Text('Count up'),
          ),
        ],
      );
    },
  ),
);

如果希望立即创建状态而不是惰性创建，可以设置 lazy 参数为 false：

StateScope(
  lazy: false,
  creator: () => Counter(),
  child: Builder(
    builder: (context) {
      final counter = context.watch<Counter>();
      return Column(
        children: [
          Text('${counter.count}'),
          ElevatedButton(
            onPressed: () {
              context.read<Counter>().countUp();
            },
            child: Text('Count up'),
          ),
        ],
      );
    },
  ),
);

完整示例

以下是一个完整的示例，展示了如何使用 StateScope 管理复杂的用户认证和计数器状态。

import 'dart:async';
import 'dart:math';

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Authed Counter',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      debugShowCheckedModeBanner: false,
      home: StateScope(
        creator: () => AuthState(),
        child: Builder(builder: (context) {
          final authState = context.watch<AuthState>();
          if (authState.isLoggedIn) {
            return StateScope(
              creator: () => AppState(),
              child: const HomePage(title: 'Authed Counter'),
            );
          } else {
            return const LoginPage();
          }
        }),
      ),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final appState = context.watch<AppState>();
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight),
        child: AppBar(
          title: Text(title, style: TextStyle(color: appState.textColor)),
          backgroundColor: appState.backgroundColor,
          actions: [
            ElevatedButton(
              onPressed: () {
                context.read<AuthState>().logout();
              },
              child: const Text('Logout'),
            ),
          ],
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            Text(appState.count.toString()),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<AppState>().incrementCounter();
        },
        tooltip: 'Increment',
        backgroundColor: appState.backgroundColor,
        child: Icon(Icons.add, color: appState.textColor),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final authState = context.watch<AuthState>();
    return Scaffold(
      body: Center(
        child: authState.isLogging
            ? const CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  OutlinedButton(
                    onPressed: () {
                      context.read<AuthState>().login();
                    },
                    child: const Text('Login'),
                  ),
                  if (authState.error != null)
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        authState.error!,
                        style: const TextStyle(color: Colors.red),
                      ),
                    ),
                ],
              ),
      ),
    );
  }
}

enum _AuthState { loggedOut, logging, loggedIn }

class AuthState extends ChangeNotifier {
  var _authState = _AuthState.loggedOut;
  String? error;

  bool get isLogging => _authState == _AuthState.logging;
  bool get isLoggedIn => _authState == _AuthState.loggedIn;

  void login() {
    unawaited(_login());
  }

  Future<void> _login() async {
    error = null;
    _authState = _AuthState.logging;
    notifyListeners();

    try {
      await Future.delayed(const Duration(milliseconds: 500));
      final rand = Random().nextDouble();
      if (rand > 0.9) {
        throw Exception("intentional random error example");
      }
    } catch (e) {
      error = 'Login failed: ${e.toString()}';
      logout();
      return;
    }

    _authState = _AuthState.loggedIn;
    notifyListeners();
  }

  void logout() {
    _authState = _AuthState.loggedOut;
    notifyListeners();
  }
}

const _colors = [
  Colors.blue,
  Colors.red,
  Colors.green,
  Colors.purple,
  Colors.yellow,
];

class AppState extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void incrementCounter() {
    _count++;
    _backgroundColor = _colors[count % 5];
    notifyListeners();
  }

  Color _backgroundColor = Colors.blue;
  Color get backgroundColor => _backgroundColor;

  Color get textColor =>
      _backgroundColor == Colors.yellow ? Colors.black87 : Colors.white;
}