Flutter状态管理插件flutter_state_notifier的使用
Flutter状态管理插件flutter_state_notifier的使用
简介
欢迎来到flutter_state_notifier
的世界!这个库是为与state_notifier
一起使用而设计的一个辅助包。它为StateNotifier添加了额外的Flutter绑定,例如与provider的集成。
可用的组件
StateNotifierProvider
StateNotifierProvider相当于ChangeNotifierProvider,但用于StateNotifier。
它的作用是创建一个StateNotifier并在提供者从widget树中移除时销毁它。如果创建的StateNotifier使用了LocatorMixin,StateNotifierProvider还将执行必要的操作以使read
/update
与provider协同工作。
它与大多数提供者类似,有一个小的区别:不是暴露一个值,而是同时暴露两个值:
- StateNotifier实例
- StateNotifier的
state
这意味着当你编写以下代码时:
class MyState {}
class MyStateNotifier extends StateNotifier<MyState> {
MyStateNotifier() : super(MyState());
}
// ...
MultiProvider(
providers: [
StateNotifierProvider<MyStateNotifier, MyState>(create: (_) => MyStateNotifier()),
]
)
你可以通过以下方式获取:
- 在widget树中获取StateNotifier实例,写法为
context.read<MyStateNotifier>()
- 获取并观察当前的
MyState
,写法为context.watch<MyState>()
StateNotifierBuilder
StateNotifierBuilder等同于Flutter中的ValueListenableBuilder
。
它允许你监听一个StateNotifier并根据其状态重建UI,但它不会创建、销毁或提供对象。
与StateNotifierProvider不同,这将不会使StateNotifier的read
/update
工作。
使用方法如下:
class MyState {}
class MyStateNotifier extends StateNotifier<MyState> {
MyStateNotifier() : super(MyState());
}
// ...
MyStateNotifier stateNotifier;
return StateNotifierBuilder<MyState>(
stateNotifier: stateNotifier,
builder: (BuildContext context, MyState state, Widget child) {
return Text('$state');
},
)
示例代码
以下是一个完整的示例demo,展示了如何使用flutter_state_notifier
来实现一个简单的计数器应用。
import 'package:flutter/material.dart';
import 'package:flutter_state_notifier/flutter_state_notifier.dart';
import 'package:provider/provider.dart';
// 定义状态类
class MyState {
final int count;
MyState(this.count);
}
// 定义状态通知器类
class MyStateNotifier extends StateNotifier<MyState> {
MyStateNotifier() : super(MyState(0));
void increment() {
state = MyState(state.count + 1);
}
}
// 日志记录器接口
abstract class Logger {
void log(String message);
}
// 控制台日志记录器实现
class ConsoleLogger implements Logger {
@override
void log(String message) {
print(message);
}
}
void main() {
runApp(
MultiProvider(
providers: [
Provider<Logger>(create: (_) => ConsoleLogger()),
StateNotifierProvider<MyStateNotifier, MyState>(
create: (_) => MyStateNotifier(),
// Override MyState to make it animated
builder: (context, child) {
return TweenAnimationBuilder<MyState>(
duration: const Duration(milliseconds: 500),
tween: MyStateTween(end: context.watch<MyState>()),
builder: (context, state, _) {
return Provider.value(value: state, child: child);
},
);
},
),
],
child: MyApp(),
),
);
}
/// A [MyStateTween].
///
/// This will apply an [IntTween] on [MyState.count].
class MyStateTween extends Tween<MyState> {
MyStateTween({MyState? begin, MyState? end}) : super(begin: begin, end: end);
@override
MyState lerp(double t) {
final countTween = IntTween(begin: begin?.count, end: end?.count);
// Tween the count
return MyState(
countTween.lerp(t),
);
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Counter example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
context.select((MyState value) => value.count).toString(),
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: context.read<MyStateNotifier>().increment,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
在这个示例中,我们创建了一个简单的计数器应用,使用了flutter_state_notifier
来进行状态管理,并且实现了计数器数值变化时的动画效果。希望这个例子能帮助你更好地理解和使用flutter_state_notifier
。
更多关于Flutter状态管理插件flutter_state_notifier的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter状态管理插件flutter_state_notifier的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter中使用flutter_state_notifier
插件进行状态管理的代码示例。这个插件基于Riverpod,是一个轻量级且强大的状态管理解决方案。
1. 添加依赖
首先,在你的pubspec.yaml
文件中添加flutter_riverpod
和flutter_state_notifier
依赖:
dependencies:
flutter:
sdk: flutter
flutter_hooks: ^0.18.0 # 如果你打算使用Hooks
flutter_riverpod: ^1.0.0 # 请使用最新版本
flutter_state_notifier: ^0.7.0 # 请使用最新版本
2. 初始化Riverpod
在你的main.dart
文件中,初始化Riverpod:
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_state_notifier/flutter_state_notifier.dart';
void main() {
runApp(
ProviderScope(
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
3. 创建一个StateNotifier
创建一个新的文件counter_state.dart
,并定义一个StateNotifier来管理计数器的状态:
import 'package:flutter_state_notifier/flutter_state_notifier.dart';
class CounterState extends StateNotifier<int> {
CounterState() : super(0) {
// You can initialize state or add methods to modify the state here
}
void increment() {
state += 1;
}
void decrement() {
state = state > 0 ? state - 1 : 0;
}
}
4. 创建Provider
在你的main.dart
文件中,为CounterState
创建一个Provider:
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'counter_state.dart';
final counterProvider = stateNotifierProvider<CounterState>((ref) {
return CounterState();
});
5. 使用状态
在你的MyHomePage
中使用这个Provider和状态:
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'counter_state.dart';
class MyHomePage extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final counter = ref.watch(counterProvider);
return Scaffold(
appBar: AppBar(
title: Text('Flutter StateNotifier Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'${counter}',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => ref.read(counterProvider.notifier).increment(),
tooltip: 'Increment',
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
}
6. 完整代码结构
确保你的项目结构如下:
your_flutter_project/
├── android/
├── ios/
├── lib/
│ ├── counter_state.dart
│ ├── main.dart
├── pubspec.yaml
7. 运行应用
使用flutter run
命令运行你的Flutter应用。你应该能够看到一个计数器应用,你可以通过点击浮动按钮来增加计数器的值。
这个示例展示了如何使用flutter_state_notifier
进行状态管理。你可以根据需要扩展这个示例,添加更多的状态和逻辑。