Flutter中实现无BuildContext跳转

背景说明

做一个小工具时,想执行路由后退,但这需要BuildContext对象, 于是就近随便找了一个BuildContext对象,结果flutter出现错误:

FlutterError (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.)

原因

我们在哪里执行路由pop()ScaffoldMessenger相关操作,就必须用对应widgetBuildContext, 有时候还会出现比较绕的情况,比如:你在A组件中定义了个方法,该方法中执行了路由跳转,但该方法你实际是以传参的方式传到了B组件甚至C组件中执行,那此时如果你用A组件的BuildContext那就会报错,实际在哪里执行,就必须用哪个组件的BuildContext对象

解决方案

MaterialApp的构造函数有个navigatorKey的参数,定义一个全局的GlobalKey<NavigatorState>, 再在需要使用当前BuildContext的地方,直接从GlobalKey<NavigatorState>中获取即可

navigator_util.dart

dart 复制代码
import 'package:flutter/material.dart';

class NavigatorStateUtil {
  // 需要先配置到MaterialApp的navigatorKey属性才可真正使用
  static final GlobalKey<NavigatorState> globalNavigatorKey =
      GlobalKey<NavigatorState>();
}

使用NavigatorStateUtil

MaterialApp初始化时,配置上去

在需要BuildContext的地方,通过NavigatorStateUtil获取

参考资料

Flutter中实现无Context跳转 - 掘金 (juejin.cn)

flutter的无context全局实现路由跳转 - 掘金 (juejin.cn)

Flutter 中由 BuildContext 引发的血案 - 知乎 (zhihu.com)

Flutter之基本路由,命名路由跳转,返回上一页,替换路由和返回根路由------Flutter基础系列_flutter go_router 返回_houruoyu3的博客-CSDN博客

Flutter 不利用 BuildContext 跳转页面_flutter中如何实现无context跳转详解-CSDN博客

相关推荐
你听得到112 小时前
肝了半个月,我用 Flutter 写了个功能强大的图片编辑器,告别image_cropper
android·前端·flutter
旧时光_2 小时前
第3章:基础组件 —— 3.2 按钮
flutter
旧时光_7 小时前
第3章:基础组件 —— 3.1 文本及样式
flutter
旧时光_7 小时前
第2章:第一个Flutter应用 —— 2.8 Flutter异常捕获
flutter
猪哥帅过吴彦祖8 小时前
Flutter 系列教程:应用导航 - Navigator 1.0 与命名路由
android·flutter·ios
旧时光_8 小时前
第2章:第一个Flutter应用 —— 2.7 调试Flutter应用
flutter
鹏多多10 小时前
flutter图片选择库multi_image_picker_plus和image_picker的对比和使用解析
android·flutter·ios
GISer_Jing10 小时前
Flutter架构解析:从引擎层到应用层
前端·flutter·架构
lqj_本人10 小时前
Flutter与鸿蒙EventChannel事件流通信详解
flutter