Flutter's routing navigation
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 native Android development, page redirection is completed through startActivity or startActivityForResult. How to implement it in Flutter?
In Flutter, jumps between pages are managed through Route and Navigator:
- Route is the abstraction of the page, mainly responsible for creating corresponding interfaces, receiving parameters, and responding to Navigator opening and closing;
- Navigator will maintain a route stack management Route. Route is opened and put into the stack when it is opened, Route is closed and put out the stack when it is opened. You can also directly replace a certain Route in the stack.
In Flutter, it can be divided into basic routes and named routes based on whether to register in advance.
Basic routing: No early registration.
Named routes: You need to register at the entrance of the APP.
The basic routing method is relatively simple and flexible, and is suitable for scenarios where there are not many pages in the application. When there are many pages in the application, and then use the basic routing method, every time we jump to a new page, we have to manually create a MaterialPageRoute instance, initialize the page, and then call the push method to open it, which is still quite troublesome.
The application MaterialApp provides a page name mapping rule, namely routes, the routing table is actually a Map, where the key value corresponds to the page name, and the value value is a WidgetBuilder callback function. We need to create the corresponding page in this function. Once the page name is defined in the routing table, we can use . to open the page.
It should be noted that it is only useful to register the route in MaterialApp that enters the APP entrance.
Open using basic routing Page1：
(
context, MaterialPageRoute(builder: (context) => Page1())),
Named routes：
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 a route "route_Page1": (context) => Page1(),
...
},
onUnknownRoute: (RouteSettings setting) =>
MaterialPageRoute(builder: (context) => ErrorPage()),
theme: ThemeData(
primarySwatch: ,
visualDensity: ,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
// Open Page1 using named routing:(context, "route_Page1"),
Default routing
Use a named route. If the name is not in the routing table, an error will be reported. At this time, you can set the default route. When it cannot be found, you can enter a specified page. Just configure it in MaterialApp: onUnknownRoute
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 routing and entered the specified page onUnknownRoute: (RouteSettings setting) =>
MaterialPageRoute(builder: (context) => ErrorPage()),
theme: ThemeData(
primarySwatch: ,
visualDensity: ,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
Page jumps and passes parameters
Pass in the arguments attribute; then obtain the parameters on the open page through (context).; the parameters are passed through the method
1. Pass parameters：
(context, "route_Page3", arguments: "hello"),
2. Receive parameters：
class Page3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
String msg = (context). as String;
return Scaffold(
backgroundColor: ,
appBar: AppBar(
title: Text("Passing parameters"),
),
body: Text("The parameter obtained is: $msg"),
);
}
}
3， Return to parameters
class Page4 extends StatelessWidget {
@override
Widget build(BuildContext context) {
String msg = (context). as String;
return Scaffold(
backgroundColor: ,
appBar: AppBar(
title: Text("Return Parameters"),
),
body: Text("The parameter obtained is: $msg"),
floatingActionButton: FloatingActionButton(
child: Icon(),
onPressed: () => (context, "hi"),
),
);
}
}
4. Receive back-pass parameters：passthenmethod
(context, "route_Page4", arguments: "hello")
.then((value) => print("The returned parameter is $value")),
Summarize
Jump between pages is done through Navigator and PageRoute. There are two ways: basic routing and named routing; since the route may not be found by using named routing, it is determined by configuring the onUnknownRoute attribute, and when the route cannot be found, it enters the specified page; by passing and introducing the parameters of the page jump, the introduction of page jump is completed.
The above is a detailed explanation of Flutter's routing navigation. For more information about Flutter's routing navigation, please follow my other related articles!