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博客

相关推荐
zhangkai2 小时前
Flutter的状态管理工具
flutter
前端Hardy2 小时前
Flutter vs React Native vs HarmonyOS:谁更适合下一代跨端?2026 年技术选型终极指南
前端·flutter·react native
不爱吃糖的程序媛3 小时前
鸿蒙 Flutter 多引擎场景开发指导
flutter·华为·harmonyos
ITKEY_3 小时前
flutter 在iPad mini7上真机运行实战(踩坑)
flutter·ios·ipad
恋猫de小郭3 小时前
Android 性能迎来提升:内核引入 AutoFDO 普惠所有 15-16 设备
android·前端·flutter
Justin在掘金3 小时前
Flutter Engine、Dart VM、Runner、鸿蒙端进程与线程 —— 深度解析
flutter
程序员Ctrl喵7 小时前
渲染流水线:从代码到像素的“非凡旅程”
flutter
王码码20359 小时前
Flutter for OpenHarmony:es_compression — 高性能 Brotli 与 Zstd 算法实战
算法·flutter·elasticsearch
左手厨刀右手茼蒿9 小时前
Flutter 三方库 build_modules 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、模块化的 Dart 代码编译策略与构建流水线系统
flutter·harmonyos·鸿蒙·openharmony·build_modules
鹏多多.19 小时前
Flutter使用screenshot进行截屏和截长图以及分享保存的全流程指南
android·前端·flutter·ios·前端框架