Flutter Web场景重置后因焦点问题引发崩溃

问题根源 #

退出登录时页面已销毁，FocusNode完成dispose，但自动焦点逻辑可能在页面销毁后仍异步触发，或是Web端路由缓存导致旧实例被误操作，引发“已销毁的FocusNode无法设置焦点”类错误。

修复步骤 #

• 确保自动焦点在页面挂载后触发
  不要在initState中直接调用焦点请求，改用addPostFrameCallback并判断页面状态，避免在未挂载/已销毁时操作：

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (mounted) {
        _inputFocusNode.requestFocus();
      }
    });
  }
  

• dispose前先取消焦点
  在销毁FocusNode前先取消焦点绑定，切断后续可能的异步操作关联：

  @override
  void dispose() {
    _inputFocusNode.unfocus();
    _inputFocusNode.dispose();
    _textController.dispose();
    super.dispose();
  }
  

• 退出登录时清理全局焦点
  配合路由清理操作，额外清除全局焦点状态，避免Web端路由残留的焦点影响：

  await Navigator.of(context, rootNavigator: true)
      .pushNamedAndRemoveUntil('/login', (Route<dynamic> route) => false);
  FocusScope.of(context).unfocus();
  

• 升级Flutter版本
  Flutter 3.3.4存在Web端焦点管理的已知bug，升级到3.10及以上稳定版可解决此类底层问题。

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