Flutter状态管理插件flutter_state_notifier的使用

Flutter状态管理插件flutter_state_notifier的使用

简介

pub package

欢迎来到flutter_state_notifier的世界!这个库是为与state_notifier一起使用而设计的一个辅助包。它为StateNotifier添加了额外的Flutter绑定,例如与provider的集成。

可用的组件

StateNotifierProvider

StateNotifierProvider相当于ChangeNotifierProvider,但用于StateNotifier

它的作用是创建一个StateNotifier并在提供者从widget树中移除时销毁它。如果创建的StateNotifier使用了LocatorMixinStateNotifierProvider还将执行必要的操作以使read/updateprovider协同工作。

它与大多数提供者类似,有一个小的区别:不是暴露一个值,而是同时暴露两个值:

这意味着当你编写以下代码时:

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不同,这将不会使StateNotifierread/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

1 回复

更多关于Flutter状态管理插件flutter_state_notifier的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter中使用flutter_state_notifier插件进行状态管理的代码示例。这个插件基于Riverpod,是一个轻量级且强大的状态管理解决方案。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加flutter_riverpodflutter_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进行状态管理。你可以根据需要扩展这个示例,添加更多的状态和逻辑。

回到顶部