导入flutter_reactive_value包时出现编译错误求助

问题详情 #

执行flutter pub add flutter_reactive_value安装包并在main.dart中添加导入语句import 'package:flutter_reactive_value/flutter_reactive_value.dart';后，Flutter Web（Chrome）和Windows平台均出现编译错误，错误核心为：

The getter 'mounted' isn't defined for the class 'Element'

尝试了该包1.0.0至1.0.3的所有版本，官方示例项目也出现相同错误，使用Dart 2.18版本。

报错原因 #

Element.mounted是Flutter 3.7及以上版本（对应Dart 2.19+）新增的属性，而你的Flutter版本（对应Dart 2.18）未包含该属性，flutter_reactive_value包的代码依赖了这个新增属性，导致编译失败。

解决办法 #

方法1：升级Flutter版本 #

这是最直接的解决方案，升级到支持Element.mounted的Flutter版本：

1. 执行命令升级Flutter到最新稳定版：

   flutter upgrade
   

2. 升级完成后，重新运行项目即可。

方法2：修改包源码适配旧版Flutter #

如果不想升级Flutter，可以手动修改包的源码：

1. 找到包的源码文件：路径为项目根目录下的.pub-cache/hosted/pub.dartlang.org/flutter_reactive_value-[你的版本号]/lib/src/reactive_value_notifier.dart
2. 定位到第30行的代码：

   if (elementRef.target?.mounted ?? false) {
   

3. 将其替换为旧版Flutter中判断Element是否挂载的逻辑：

   if (elementRef.target?.owner != null) {
   

4. 保存修改后，重新编译项目。

方法3：使用替代的轻量状态管理方案 #

如果以上两种方式都不想采用，可以选择其他轻量状态管理工具，比如：

• 直接使用Flutter原生的ValueNotifier结合ListenableBuilder实现状态管理
• 使用provider包的基础功能
• 使用flutter_riverpod的轻量用法

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