What is a Router

On Android, the page corresponds to an Activity; on iOS, it corresponds to a ViewController. In Flutter, the page is just a widget, a Router. A Route usually refers to an Activity on Android and a ViewController on iOS

MaterialPageRoute

The official explanationThe MaterialPageRoute is derived from the PageRoute class, which is an abstract class that represents a modal routing page occupying the entire screen space. It also defines the interface and properties of the transition animation during route construction and switching. MaterialPageRoute is a component provided by the Material component library, which can realize the route switching animation consistent with the style of platform page switching animation for different platforms: When a page is opened, a new page will slide from the right edge of the screen to the left until the new page is fully displayed on the screen, while the previous page will slide from the current screen to the left and disappear. When you close a page, the reverse happens: the current page slides out from the right side of the screen, while the previous page slides in from the left.

A constructor Parameters that

  • Builder is a callback function of type WidgetBuilder that builds the details of the routing page and returns a widget. We typically implement this callback to return an instance of the new route.
  • The Settings contains the route configuration information, such as the route name, route parameters, and whether to initialize the route (home page).
  • MaintainState: By default, when a new route is pushed, the original route is still saved in memory. To release all the resources used by the route, you can set maintainState to false
  • FullscreenDialog indicates whether the new routing page is a full-screen modal dialog. In iOS, if fullscreenDialog is true, the new page will slide in from the bottom of the screen (instead of horizontally).
  • TransitionDuration page transitionDuration

CupertinoPageRoute and MaterialPageRoute source code logic is the same.

Navigator

Navigator.of(context) to get the NavigatorState object, and then through the NavigatorState object function to realize the page jump, close, replace, etc

  • Push the router information set to Navigator to realize page hopping.
//void _openMyPage() { // Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => MyPage())); //} navigator.push (BuildContext Context, Route<T> Route) converts the current page to a Router and adds it to the stack of routes managed by the Navigator. You can get the value of the page back in then().Copy the code
  • “Of” is basically getting the good state of the most recent instance of the Navigator.

RootNavigator: true retrieves the rootNavigator, otherwise retrieves the Navigator closest to the current Widget (default: false). In order to obtain the root Navigator, you need to pass a context object, but under some requirements (such as token expiration jump login page), you cannot obtain the context object, but also need to jump, what should you do? At this point we can pass a key to the root Navigator and get the NavigatorState object based on that key. The MaterialApp in turn gives us the opportunity to pass the key to the root Navigator

Class MaterialApp extends StatefulWidget {const MaterialApp({Key Key, // Custom Key this. NavigatorKey,... })}Copy the code

By assigning navigatorKey to a GlobalKey object, you can obtain the root Navigator without the context to jump to, return to, replace, and so on.

  • Pop navigates to a new page or returns to the previous page.
  • CanPop determines if you can navigate to a new page
  • MaybePop might navigate to a new page. MaybePop can be understood as an updated version of canPop, which is used only to determine whether a page can be popped. MaybePop takes it to the next level — pop if you can pop, nothing else.
  • PopAndPushNamed specifies a routing path and navigates to the new page.
  • PopUntil Executes pop repeatedly until the parameters of the function return true.
  • PushAndRemoveUntil pushes the given route to the Navigator, removing the previous – route until the predicate returns true.
  • PushNamed pushes the named route to the Navigator.
  • PushNamedAndRemoveUntil pushes the named route to the Navigator, – deleting the previous route until the predicate returns true.
  • PushReplacement Indicates route replacement.
  • PushReplacementNamed This is also a replacement route operation. Push a named route to the Navigator and process the previous route after the new route completes the animation.
  • RemoveRoute deletes the Route from the Navigator and executes the route. dispose operation at the same time.
  • RemoveRouteBelow removes the Route from the Navigator and executes the route. dispose operation to replace the Route from the anchorRouter parameter passed in.
  • Replace replaces the route in the Navigator with a new route.
  • The replaceRouteBelow replaces the route in the Navigator with a new route that was passed in to the anchorRouter parameter.