Flutter Riverpod状态管理之AutoDisposeNotifierProvider

Flutter的Riverpod状态管理，目前来看是官方出的最好用的状态管理库了，今天我们主要看AutoDisposeNotifierProvider的使用，AutoDisposeNotifierProvider具有如下的优势：
1、自动释放资源：
AutoDisposeNotifierProvider会在Provider不被任何Widget监听时，自动释放其状态和资源，这对于需要管理大量资源的应用（如网络请求、数据库连接等）特别有用。
2、防止内存泄漏：
通过自动释放不再需要的状态，可以有效防止内存泄漏。
3、简化代码：
不需要手动管理Provider的生命周期，减少了样板代码，使代码更加简洁和易维护。
4、提高性能：
通过即使释放不再需要的资源，可以提高应用的性能，确保资源高效利用。

一、依赖库:

需要在pubspec.yaml中添加如下依赖：

dependencies:
  # 官方最新状态管理库
  flutter_riverpod: ^2.4.9
  # 通过注解(annotations)简化了Provider的定义，并与riverpod_generator配合使用，实现代码的自动生成。
  riverpod_annotation: ^2.3.3

dev_dependencies:
  # 可以自动生成各种类型的Provider，从而减少手动编写Provider的工作量。
  riverpod_generator: ^2.3.9

  # 用于代码生成，通过解析源代码并生成新的代码文件，帮助开发者自动生成重复性代码，从而提高开发效率，如序列化/反序列化、依赖注入、路由管理等。
  # 指令： flutter pub run build_runner build
  build_runner: ^2.4.7

添加完需要拉取下依赖: flutter pub get 或 flutter pub upgrade

二、定义数据模型类：

RiverPodPage4Logic源码
通过注释中的6步骤，定义数据模型类，并准备生成对应xxx.g.dart文件

import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:startup_namer/util/print_util.dart';

part 'riverpod_page4_logic.g.dart';

///1、首先定义RiverPodPage4Logic类，并继承_$RiverPodPage4Logic
///2、添加注解@riverpod
///3、定义ViewModel类RiverPodPage4ViewModel
///4、覆写build方法，并返回RiverPodPage4ViewModel实例
///5、顶部添加：part 'riverpod_page4_logic.g.dart';
///6、终端执行指令：flutter pub run build_runner build
@riverpod
class RiverPodPage4Logic extends _$RiverPodPage4Logic {
  @override
  RiverPodPage4ViewModel build() {
    requestRemoteData();
    return RiverPodPage4ViewModel();
  }

  ///模拟网络请求
  void requestRemoteData() {
    Future.delayed(const Duration(milliseconds: 2000), () {
      PrintUtil.print("request finished");
      String data = "remote data";
      //更新数据
      state = state.copyWith(data);
    });
  }
}

class RiverPodPage4ViewModel {
  String data = "";

  RiverPodPage4ViewModel();

  RiverPodPage4ViewModel copyWith(String? data) {
    return RiverPodPage4ViewModel()..data = data ?? this.data;
  }
}

该类对应的dart文件名为：riverpod_page4_logic.dart

三、脚本生成xxx.g.dart类：

riverpod_page4_logic.g.dart源码
通过执行终端指令：

flutter pub run build_runner build
自动生成对应xxx.g.dart类，具体为：riverpod_page4_logic.g.dart

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'riverpod_page4_logic.dart';

// **************************************************************************
// RiverpodGenerator
// **************************************************************************

String _$riverPodPage4LogicHash() =>
    r'932c10533d58e940dac007c45624c7d0a8c5da06';

/// See also [RiverPodPage4Logic].
@ProviderFor(RiverPodPage4Logic)
final riverPodPage4LogicProvider = AutoDisposeNotifierProvider<
    RiverPodPage4Logic, RiverPodPage4ViewModel>.internal(
  RiverPodPage4Logic.new,
  name: r'riverPodPage4LogicProvider',
  debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
      ? null
      : _$riverPodPage4LogicHash,
  dependencies: null,
  allTransitiveDependencies: null,
);

typedef _$RiverPodPage4Logic = AutoDisposeNotifier<RiverPodPage4ViewModel>;
// ignore_for_file: type=lint
// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member

以上类为自动模板生成，不需要任何修改。

四、具体调用：

RiverPodPage4源码
在组件build方法中调用：
1、通过ref.watch来进行数据监听、更新;
2、通过ref.read来进行数据读取/notifier中方法调用；
3、当然也可以使用ref.listen来只做监听，不常用，这里不再过多介绍。

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:startup_namer/base/common_base_state.dart';
import 'package:startup_namer/logic/riverpod_page4_logic.dart';

///RiverPod状态管理页 --- 【AutoDisposeNotifierProvider】
class RiverPodPage4 extends ConsumerStatefulWidget {
  const RiverPodPage4({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _RiverPodPage4State();
}

class _RiverPodPage4State extends CommonPageState<RiverPodPage4> {
  bool isRed = false;

  @override
  Widget buildPageContent(BuildContext context) {
    ///通过ref.watch监听data，当接口数据请求成功后，会自动刷新build方法，更细UI。
    String data = ref.watch(riverPodPage4LogicProvider).data;

    ///通过ref.watch监听isRed变量，当通过如下点击方法更新Model中其值时，由于这里使用了watch方法，也会自动更新build方法，刷新UI展示。
    isRed = ref.watch(riverPodPage4LogicProvider).isRed;

    return GestureDetector(
      onTap: () {
        ///通过ref.read方法读取notifier，并通过内部updateBgColor方法更新其值
        ref.read(riverPodPage4LogicProvider.notifier).updateBgColor(!isRed);
      },
      child: Container(
        alignment: Alignment.center,

        ///展示背景值
        decoration: BoxDecoration(color: isRed ? Colors.red : Colors.white),

        ///展示数据
        child: Text(
          "show Data:$data isRed:$isRed",
          style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 16),
        ),
      ),
    );
  }
}