[error record] navigator operation requested with a context that does not include a naviga

One 、 Error message

---

Flutter When the interface jumps , Report the following error :

======== 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#68181  debugOwner: GestureDetector  state: possible  won arena  finalPosition: Offset(216.4, 420.6)  finalLocalPosition: Offset(160.7, 193.9)  button: 1  sent tap down====================================================================================================

Error code :

void main() { 
      runApp(    HeroAnimation()  );}class HeroAnimation extends StatelessWidget{ 
      @override  Widget build(BuildContext context) { 
        //  Time expansion coefficient  ,  Used to reduce the running speed of animation     timeDilation = 10.0;    return MaterialApp(      home: Scaffold(        body: Container(          child: HeroWidget(            imageUrl: "https://img-blog.csdnimg.cn/20210329101628636.jpg",            width: 300,            //  Click event  ,  Click this component here  ,  Jump to a new page             onTap: (){ 
                  print(" Click event trigger ");              Navigator.of(context).push(                  MaterialPageRoute(                      builder: (context){ 
                            ///  Jump to the new interface and define here                         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: (){ 
                                      ///  Exit the current interface                                   Navigator.of(context).pop();                                },                              ),                            ),                          ),                        );                      }                  )              );            },          ),        ),      ),    );  }}

Two 、 Problem analysis

---

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

This error has nothing to do with the target interface of the jump , Only related to the current interface ;

The [MaterialApp] configures the top-level [Navigator] to search for routesin 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 a    non-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 onstartup (e.g. by another application launching this one with an intent onAndroid; see [dart:ui.PlatformDispatcher.defaultRouteName]).This widget also configures the observer of the top-level [Navigator] (ifany) to perform [Hero] animations.If [home], [routes], [onGenerateRoute], and [onUnknownRoute] are all null,and [builder] is not null, then no [Navigator] is created.

It's on it MaterialApp Notes , MaterialApp Will automatically create a Navigator , Here we use MaterialApp The above error is still reported ;

Navigator Search mechanism : This is due to calling Navigator.of(context) Code acquisition Navigator , Notice the context Context related is StatelessWidget Components , That is, the number should be StatelessWidget Component start , Upward search Navigator ;

But the actual level is like this , StatelessWidget The parcel MaterialApp The parcel Scaffold The parcel Container , lookup Navigator when , Over MaterialApp , Directly from the top StatelessWidget The component starts to look up , I'm sure I can't find Navigator , There is a direct error here ;

This is because Navigator Error caused by the search mechanism of , It's easy to solve this problem , stay StatelessWidget The outer layer of is wrapped with another MaterialApp , That would solve the problem ;

3、 ... and 、 Solution

---

stay main.dart Medium main() Function , Use MaterialApp Package interface jump components ;

In this way StatelessWidget The outer layer of the component is wrapped with another layer MaterialApp , So from StatelessWidget The component starts to look up Navigator , You can find it Navigator , Problem solving ;

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