Flutter实时聊天应用出现Looking up a deactivated widget's ancestor is unsafe错误求助

兄弟，我之前开发Flutter应用也踩过这个坑！这个错误说白了就是：你在**widget已经被销毁（进入dispose阶段）**的时候，还在尝试用context去查找它的祖先组件（比如调用Navigator.of(context)、Provider.of(context)，或者你的Database实例这类依赖），这时候组件树的状态已经不稳定了，Flutter就会抛出这个警告。

先给你拆解下错误提示里的关键信息：

Looking up a deactivated widget's ancestor is unsafe. At this point the state of the widget's element tree is no longer stable. To safely refer to a widget's ancestor in its dispose() method, save a reference to the ancestor by calling dependOnInheritedWidgetOfExactType() in the widget's didChangeDependencies() method.

翻译过来就是：在dispose方法里直接找祖先组件不安全，要在didChangeDependencies()方法里提前把需要的祖先引用保存好，之后在dispose里用这个保存的引用就行。

具体解决步骤，你照着排查： #

1. 先去看你第186行的代码，是不是在dispose()方法里？或者是在某个异步回调里（比如Firestore的实时监听回调、数据库操作的异步返回），而这个回调在widget已经被销毁后才执行？
2. 如果是在dispose()里调用了需要context的方法：
   • 第一步：在你的State类里声明一个变量，用来保存你需要的祖先依赖。比如你需要用到Database实例，就写：

     late final Database database;
     

   • 第二步：在didChangeDependencies()方法里提前保存这个引用：

     @override
     void didChangeDependencies() {
       super.didChangeDependencies();
       // 这里用dependOnInheritedWidgetOfExactType获取你需要的祖先组件实例
       // 如果你是用InheritedWidget提供的Database，就替换成对应的类型
       database = dependOnInheritedWidgetOfExactType<YourDatabaseProvider>()!.database;
     }
     

   • 第三步：在dispose()里，直接用这个提前保存的变量，别再用context去获取了：

     @override
     void dispose() {
       // 用保存好的database实例做清理操作，比如关闭聊天监听
       database.closeChatListener();
       super.dispose();
     }
     

3. 如果是异步回调的问题（比如聊天消息的实时更新回调，在页面pop之后还在执行）：
   • 在使用context之前，一定要加mounted判断，确保当前widget还在组件树里：

     // 比如你监听Firestore聊天消息的代码
     FirebaseFirestore.instance
         .collection('chats')
         .snapshots()
         .listen((snapshot) {
       if (mounted) { // 先判断widget是否还挂载着
         // 再执行更新UI、导航这类需要context的操作
         setState(() {
           messages = snapshot.docs.map(...).toList();
         });
       }
     });
     

举个贴合你聊天App的实际例子 #

假设你在聊天页面的dispose方法里，原本是这样写的（会报错的写法）：

@override
void dispose() {
  // 这里用context获取Database实例，在dispose时会报错
  Database(context).closeChat();
  super.dispose();
}

改成正确的写法：

class ChatPageState extends State<ChatPage> {
  late final Database database;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 提前在didChangeDependencies里保存引用
    database = dependOnInheritedWidgetOfExactType<DatabaseProvider>()!.database;
  }

  @override
  void dispose() {
    // 用提前保存的实例，不用context
    database.closeChat();
    super.dispose();
  }

  // 其他聊天相关代码...
}

你先照着这个思路去排查你的第186行代码，应该就能解决问题了！

备注：内容来源于stack exchange，提问作者Rifat Hasan Priyo