一、报错信息

Flutter 界面跳转时 , 报如下错误 :

======== Exception caught by gesture ===============================================================
The following assertion was thrown while handling a gesture:
Navigator operation requested with a context that does not include a Navigator.The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.
When the exception was thrown, this was the stack:
#0      Navigator.of.<anonymous closure> (package:flutter/src/widgets/navigator.dart:2711:9)
#1      Navigator.of (package:flutter/src/widgets/navigator.dart:2718:6)
#2      HeroAnimation.build.<anonymous closure> (package:flutter_animation/main.dart:57:25)
#3      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:994:20)
#4      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24)
...
Handler: "onTap"
Recognizer: TapGestureRecognizer#68181debugOwner: GestureDetectorstate: possiblewon arenafinalPosition: Offset(216.4, 420.6)finalLocalPosition: Offset(160.7, 193.9)button: 1sent tap down
====================================================================================================

错误代码 :

void main() {runApp(HeroAnimation());
}class HeroAnimation extends StatelessWidget{@overrideWidget build(BuildContext context) {// 时间膨胀系数 , 用于降低动画运行速度timeDilation = 10.0;return MaterialApp(home: Scaffold(body: Container(child: HeroWidget(imageUrl: "https://img-blog.csdnimg.cn/20210329101628636.jpg",width: 300,// 点击事件 , 这里点击该组件后 , 跳转到新页面onTap: (){print("点击事件触发");Navigator.of(context).push(MaterialPageRoute(builder: (context){/// 跳转到的新界面再此处定义return MaterialApp(home: Scaffold(body: Container(color: Colors.white,padding: EdgeInsets.all(20),alignment: Alignment.topLeft,child: HeroWidget(imageUrl: "https://img-blog.csdnimg.cn/20210329101628636.jpg",width: 100,onTap: (){/// 退出当前界面Navigator.of(context).pop();},),),),);}));},),),),);}
}

二、问题分析

Navigator operation requested with a context that does not include a Navigator.

该错误与跳转的目标界面无关 , 只与当前的界面有关 ;

The [MaterialApp] configures the top-level [Navigator] to search for routes
in the following order:1. For the `/` route, the [home] property, if non-null, is used.2. Otherwise, the [routes] table is used, if it has an entry for the route.3. Otherwise, [onGenerateRoute] is called, if provided. It should return anon-null value for any _valid_ route not handled by [home] and [routes].4. Finally if all else fails [onUnknownRoute] is called.If a [Navigator] is created, at least one of these options must handle the
`/` route, since it is used when an invalid [initialRoute] is specified on
startup (e.g. by another application launching this one with an intent on
Android; see [dart:ui.PlatformDispatcher.defaultRouteName]).
This widget also configures the observer of the top-level [Navigator] (if
any) to perform [Hero] animations.If [home], [routes], [onGenerateRoute], and [onUnknownRoute] are all null,
and [builder] is not null, then no [Navigator] is created.

上面是 MaterialApp 的注释 , MaterialApp 中会自动创建一个 Navigator , 此处使用了 MaterialApp 仍然报上述错误 ;

Navigator 查找机制 : 这是由于调用了 Navigator.of(context) 代码获取 Navigator , 注意这里的 context 上下文关联的是 StatelessWidget 组件 , 也就是数从该 StatelessWidget 组件开始 , 向上查找 Navigator ;

但是实际的层级是这样的 , StatelessWidget 包裹 MaterialApp 包裹 Scaffold 包裹 Container , 查找 Navigator 时 , 越过了 MaterialApp , 直接从最顶层的 StatelessWidget 组件开始向上查找 , 肯定找不到 Navigator , 这里直接报错了 ;

这是由于 Navigator 的查找机制导致的错误 , 解决这个问题也很简单 , 在 StatelessWidget 的外层再包裹一个 MaterialApp , 这样就可以解决问题了 ;

三、解决方案

在 main.dart 中的 main() 函数中 , 使用 MaterialApp 包裹界面跳转的组件 ;

这样在 StatelessWidget 组件的外层又包裹了一层 MaterialApp , 这样从 StatelessWidget 组件开始向上查找 Navigator , 就可以找到 Navigator , 问题解决 ;

void main() {runApp(MaterialApp(title: "Hero 动画",home: HeroAnimation(),));
}

【错误记录】Flutter 界面跳转报错 ( Navigator operation requested with a context that does not include a Naviga )相关推荐

flutter报错Navigator operation requested with a context that does not include a Navigator
此问题一般情况出现在直接在main.dart文件中操作路由. 如上情况提示路由控制器需要一个context但是当前navigator并不包含,通俗的讲要使用路由(Navigator),根控件不能直接是 ...
Flutter提示之Navigator operation requested with a context that does not include a Navigator.
1 .问题用Flutter写了页面跳转,提示错误如下 Navigator operation requested with a context that does not include a Nav ...
【iOS】使用storyboard界面跳转报错：unrecognized selector sent to instance 0x7
使用storyboard直接model界面跳转的时候出现报错:unrecognized selector sent to instance 0x7... 网上查了相似的问题但是依旧没有找到解决方法,后 ...
【错误记录】编译 ijkplayer 报错 (fatal error: libyuv.h: No such file or directory #include “libyuv.h“ )
文章目录一.报错信息二.解决方案参考 https://github.com/bilibili/ijkplayer 项目的编译过程 ; 一.报错信息在编译完 ffmpeg 之后 , 执行 ./c ...
tomcat跳转报错_微信小程序开发：使用reLaunch跳转时报错的解决步骤
最近在做微信小程序的一个项目,遇到一个微信小程序使用reLaunch跳转的报错的问题,为了避免以后出现同款错误的再次发生,特意用一篇博文记录一下,方便查阅使用.错误再现,具体错误日志提示如下所示:VM ...
0809-vue(momentjs的使用弄时间撮日期的,父子传值props,生命周期函数beforedestroy与destroyed,黑云项目，解决相同路由跳转报错问题)
01-momentjs的使用: momentjs的官网: 直通车. <!DOCTYPE html> <html lang="en"> <head> ...
生产路由跳转报错找不到js路径问题
问题描述:点击路由跳转报错解决方案:问题原因是点击路由找不到js路径,修改打包配置为绝对路径,部署到tomcat根目录转载于:https://www.cnblogs.com/lcosima/p/9 ...
【错误记录】VMware 虚拟机报错 ( 向 VMWare 虚拟机中的 Ubuntu 系统拷贝文件时磁盘空间不足 ② | 删除交换空间 )
文章目录一.报错信息二.解决方案一.报错信息在 [错误记录]VMware 虚拟机报错 ( 向 VMWare 虚拟机中的 Ubuntu 系统拷贝文件时磁盘空间不足 ) 博客中 , 给出了解决方案 ...
解决React中路由跳转报错:Cannot read property ‘push’ of undefined
React中路由跳转报错: 页面在Router中配置了,但组件无法使用 this.props.history.push() 进行跳转,并且会出现报错:Cannot read property 'pus ...

【错误记录】Flutter 界面跳转报错 ( Navigator operation requested with a context that does not include a Naviga )

文章目录

一、报错信息

二、问题分析

三、解决方案

【错误记录】Flutter 界面跳转报错 ( Navigator operation requested with a context that does not include a Naviga )相关推荐

最新文章

热门文章