Detailed explanation of route navigation of Flutter

Routing Navigation of Directory Flutter Default route
Page jumps and passes parameters
Summarize

Routing Navigation of Flutter

Routing management or navigation management: To smoothly transition from one page to another, we need to have a unified mechanism to manage jumps between pages. In the native Android development, is through startActivity or startActivityForResult to complete the page jump, in Flutter how to achieve?

In Flutter, jumps between pages are managed through Route and Navigator:

Route is the abstraction of the page, which is mainly responsible for creating the corresponding interface, receiving parameters and responding to the opening and closing of Navigator; While Navigator will maintain a routing stack to manage Route, Route will enter the stack when it is opened, Route will leave the stack when it is closed, and it can also directly replace one Route in the stack.

In Flutter, it can be divided into basic route and named route according to whether it is registered in advance.

Basic route: No advance registration.

Named route: You need to register at the entrance of APP.

Basic routing is relatively simple and flexible, and is suitable for scenarios with few pages in applications. However, when there are many pages in the application, using the basic routing method, we have to manually create an MaterialPageRoute instance, initialize the page, and then call the push method to open it every time we jump to a new page, which is still troublesome.

The application MaterialApp provides a page name mapping rule, that is, the routing table routes, which is actually an Map, where the value of key corresponds to the page name, while the value of value is an WidgetBuilder callback function, so we need to create the corresponding page in this function. Once the page name is defined in the routing table, we can use Navigator. pushNamed to open the page.

It should be noted that it is useful to register the route on MaterialApp entering the APP portal.

 Open using basic routing  Page1 : 
 Navigator.push(
        context, MaterialPageRoute(builder: (context) => Page1())),
        
  Named route: 
 void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   title: 'Flutter Demo',
   routes: {
   //  Register route 
    "route_Page1": (context) => Page1(),
    ...
   },
   onUnknownRoute: (RouteSettings setting) =>
     MaterialPageRoute(builder: (context) => ErrorPage()),
   theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
   ),
   home: MyHomePage(title: 'Flutter Demo Home Page'),
  );
 }
}
//  Open with a named route  Page1 : 
Navigator.pushNamed(context, "route_Page1"),

Default route

Use a named route, the name is not in the routing table will report an error, this time you can set the default route, when not found, go to a specified page. You only need to configure: onUnknownRoute in MaterialApp

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   title: 'Flutter Demo',
   routes: {
    "route_Page1": (context) => Page1(),
    ......
   },
   //  An error occurred in the route and entered the specified page 
   onUnknownRoute: (RouteSettings setting) =>
     MaterialPageRoute(builder: (context) => ErrorPage()),
   theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
   ),
   home: MyHomePage(title: 'Flutter Demo Home Page'),
  );
 }
}

Page jumps and passes parameters

Passing the arguments attribute through Navigator. pushNamed; Then get the parameters through ModalRoute. of (context). settings. arguments on the open page; Parameters are returned through the Navigator. pop method

1.  Pass parameters: 
 Navigator.pushNamed(context, "route_Page3", arguments: "hello"),
 2.  Receive parameters: 
 
class Page3 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  String msg = ModalRoute.of(context).settings.arguments as String;
  return Scaffold(
   backgroundColor: Colors.red,
   appBar: AppBar(
    title: Text(" Transfer parameter "),
   ),
   body: Text(" The resulting parameters are :$msg"),
  );
 }
}
3 ,   Return of parameters 
class Page4 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  String msg = ModalRoute.of(context).settings.arguments as String;
  return Scaffold(
   backgroundColor: Colors.yellow,
   appBar: AppBar(
    title: Text(" Return parameter "),
   ),
   body: Text(" The resulting parameters are :$msg"),
   floatingActionButton: FloatingActionButton(
    child: Icon(Icons.backspace),
    onPressed: () => Navigator.pop(context, "hi"),
   ),
  );
 }
}
4.  Reception of return parameters: through then Method 
 Navigator.pushNamed(context, "route_Page4", arguments: "hello")
          .then((value) => print(" The parameters returned are $value")),

Summarize

The jump between pages is completed by Navigator and PageRoute, and there are two ways: basic route and named route; Because the named route may have the situation that the route cannot find the page, it is determined by configuring the onUnknownRoute attribute and entering the specified page when the route cannot be found; By introducing the parameter transfer and introduction of page jump, the introduction of page jump is completed.

The above is the detailed explanation of Flutter routing navigation details, more information about Flutter routing navigation please pay attention to other related articles on this site!