Flutter报错：ValueNotifier<bool>已释放后仍被使用，如何重建？

问题描述 #

报错：A ValueNotifier was used after being disposed.

复现步骤 #

• 从homePage.dart导航到menu.dart
• 从menu.dart返回homePage.dart
• 再次导航到menu.dart，触发报错

完整报错信息 #

FlutterError (A `ValueNotifier<bool>` was used after being disposed.
Once you have called `dispose()` on a ValueNotifier<bool>, it can no longer be used.)

相关代码 #

clearNotifier.dart

import 'package:flutter/material.dart';
ValueNotifier<bool> cancelListen =ValueNotifier(false);

homePage.dart

import 'package:project/pages/MenuFrame.dart';

...
                  IconButton(
                        icon: Image.asset('assets/image.png'),
                        iconSize: 50,
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                  builder: (_) => ChangeNotifierProvider<ValueNotifier>(
                                  create: (_) => cancelListen,
                                  child: MenuFrame(
                                userId: widget.userId
                              )
                                ),
                            ),
                          )
                          .then(
 
                              );
                        },
                      )

menu.dart

import 'package:project/class/clearNotifier.dart';

class MenuFrame extends StatefulWidget {
  const MenuFrame({Key key, this.userId}) : super(key: key);

  final String userId;
  @override
  _MenuFrame createState() => _MenuFrameState();
}


  @override
  void dispose() {
    cancelListen?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: cancelListen,
        builder: (BuildContext context, bool toClearListen,Widget child){
        ....

    });
  }

提问 #

如何在ValueNotifier已被释放后对其进行重建？

解决方案 #

核心问题是全局单例的ValueNotifier被销毁后无法复用——你在MenuFrame的dispose方法里销毁了全局的cancelListen，第二次进入页面时这个实例已经失效。以下是几种可行的解决方式：

方案1：将ValueNotifier与页面生命周期绑定 #

不再使用全局单例，而是在MenuFrame内部创建和管理ValueNotifier，每次进入页面都生成新实例：

class _MenuFrameState extends State<MenuFrame> {
  late ValueNotifier<bool> _cancelListen;

  @override
  void initState() {
    super.initState();
    _cancelListen = ValueNotifier(false); // 页面初始化时创建新实例
  }

  @override
  void dispose() {
    _cancelListen.dispose(); // 页面销毁时清理当前实例
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: _cancelListen,
      builder: (BuildContext context, bool toClearListen, Widget child) {
        // 原有业务逻辑
      },
    );
  }
}

同时修改homePage.dart，无需再通过Provider传递全局实例：

IconButton(
  icon: Image.asset('assets/image.png'),
  iconSize: 50,
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (BuildContext context) => MenuFrame(
          userId: widget.userId,
        ),
      ),
    );
  },
)

方案2：保留全局实例，禁止页面销毁它 #

如果需要全局共享这个ValueNotifier，不要在页面的dispose方法中销毁它，改为重置值即可：

@override
void dispose() {
  cancelListen.value = false; // 重置为初始值，而非销毁实例
  super.dispose();
}

方案3：全局实例销毁后手动重建 #

给全局变量添加重建逻辑，在需要时重新初始化：

1. 修改clearNotifier.dart：

import 'package:flutter/material.dart';

ValueNotifier<bool>? cancelListen = ValueNotifier(false);

// 重建方法
void resetCancelListen() {
  if (cancelListen == null || !cancelListen!.hasListeners) {
    cancelListen = ValueNotifier(false);
  }
}

2. 在homePage.dart导航前调用重建：

onPressed: () {
  resetCancelListen(); // 导航前检查并重建实例
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (_) => ChangeNotifierProvider<ValueNotifier>(
        create: (_) => cancelListen!,
        child: MenuFrame(userId: widget.userId)
      ),
    ),
  );
}

3. 修改menu.dart的dispose方法，销毁后清空引用：

@override
void dispose() {
  cancelListen?.dispose();
  cancelListen = null; // 销毁后清空变量引用
  super.dispose();
}

内容的提问来源于stack exchange，提问作者Haizad Annuar