Flutter Routing
Just like Web pages or native apps, Flutter, parameter transfer, parameter return and other services are involved when we use Flutter to develop apps. Flutter routing can meet all the business types mentioned above. In addition, we can also combine the Flutter animation to add personalized page hopping operations for route hopping, which I will explain in the future chapter of Flutter animation. Through this section, readers will not only be able to make some simple UIs themselves, but also make some simple multi-page Flutter apps using Fluttter routing combined with the previous lessons shared.
Objectives of this course
- Understand and master the simple use of Flutter routing
- Learn the difference between Flutter dynamic and static routes
- Master the parameters transfer and return process of Flutter routing between pages
- Make some simple multi-page Flutter APP with the help of routing combined with the previous lessons
About static routes and dynamic routes
In a Flutter, there are two routes: static route and dynamic route. A static route in a Flutter means that the path of the page to be jumped should be registered on the routes in advance:
{}, and static routes do not support passing parameters to the next page, but can receive the return value of the next page. The use of dynamic routing is relatively flexible. Dynamic routing also supports the transfer of parameters to the next page, and we do not need to plan the page path in advance when using it. We only need to construct the MaterialPageRoute object to complete the page jump in the specific page hopping logic. Or you can use PageRouterBuilder to customize the animation of the route jump, which I will explain in detail in the chapter on Flutter animation. Of course, dynamic routing also supports page parameter return.
Routing Scenario Classification
1. Page hopping of static routes
Scenario 1: Click the button on page A to go to page B. Data transfer and sending are not involved
rendering
MaterialApp
new MaterialApp(
home: new FlutterDemo(),
routes: <String, WidgetBuilder>{
'router/new_page': (_) = >new StaticNavigatorPage()
}));
Copy the codeA Page code:
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/simpleWidget/navigator/StaticNavigatorPage.dart';
void main(a) {
runApp(new MaterialApp(
home: new FlutterDemo(),
routes: <String, WidgetBuilder>{
'router/new_page': (_) = >new StaticNavigatorPage()
}));
}
class FlutterDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Journey to the Advancement of Flutter."),
),
body: new Center(
child: new RaisedButton(
child: new Text("Static route page hopping"),
onPressed: () {
Navigator.of(context)
.pushNamed('router/new_page'); // Ensure that the routing path of the page hop is the same as that registered above}))); }}Copy the codeB Page code:
import 'package:flutter/material.dart';
class StaticNavigatorPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Static Route page"),
),
floatingActionButton: new FloatingActionButton(
onPressed: () {
Navigator.of(context).pop();
},
child: new Text("Return"),
),
body: new Center(
child: Text("Static routes can be passed a routes parameter to define the route. But the route defined here is static,"
"It can't pass parameters to the next page,push to a new page, the pushNamed method has a Future return value."
", so static routes can also receive the return value of the next page. But you can't pass parameters to the next page."),),); }}Copy the codeIn the process of routing page hopping, we noticed the following steps: 1. Register a route and ensure the uniqueness of the route 2. To skip pages, use navigation.of (context).pushnamed (‘ routing address ‘); 3. Use the Navigator. Of (context). Pop (); End current page
2. The static route hops to receive the return value of the next page
Scenario 2: Click the button on page A to jump to page B. After page B is destroyed, page A receives the returned value from page B and displays it on the AlertDialog
rendering
A Page code:
showDialog
Dialog
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/simpleWidget/navigator/StaticNavigatorPageWithParams.dart';
void main(a) {
runApp(
new MaterialApp(home: new FlutterDemo(), routes: <String, WidgetBuilder>{
'router/new_page_with_callback': (_) = >new StaticNavigatorPageWithResult()
}));
}
class FlutterDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Journey to the Advancement of Flutter."),
),
body: new Center(
child: new RaisedButton(
child: new Text("Static route receives next page return value"),
onPressed: () {
Navigator.of(context)
.pushNamed('router/new_page_with_callback')
.then((value) {
showDialog(
context: context,
child: new AlertDialog(
content: newText(value), )); }); }))); }}Copy the codeB Page code:
As can be seen from the renderings, when I click the button in the middle of page B, the data will be returned to the previous page, but when I directly click the back button in the upper left corner of the navigation bar to return to page A, the data will not be transferred to the previous page. Pop () accepts an Object as a parameter
Navigator.of(context).pop(T extends Object);
Copy the codePop navigator.of (context).pop(” data returned at the end of the page “); Return the empty navigator.of (context).pop() object when no value is passed.
import 'package:flutter/material.dart';
class StaticNavigatorPageWithResult extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Static route with return parameters"),
),
body: new Center(
child: new OutlineButton(
onPressed: () {
Navigator.of(context).pop("Data returned at the end of the page");
},
child: Text("Click on me to return the data returned after the end of the last page."),),),); }}Copy the code3. Dynamic route page hopping
At the beginning of this article, we mentioned that dynamic routing allows you to pass parameters to the next page, as well as receive data sent back from the new page. The following I simulate two scenarios using dynamic routing, since dynamic routing can transmit value that can certainly not transmit value jump page, I will not simulate the example of dynamic routing does not transmit value jump page, readers can use static routing sample test, we mainly explain the example of using dynamic routing transmit value.
Scenario 3: Click the button on page A to transfer the user name and password to the next page B. Page B processes the received data and sends the result back to page A. Page A displays the data sent back from page B on the Dialog.
Simulation renderings
MaterialApp
Navigator.push
Navigator.push(
context,
new MaterialPageRoute(
//_ indicates that the parameter is empty
builder: (_) => new DynamicNaviattionPage(
username: "xiedong",
password: "123456")));Copy the codeA Page code:
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/simpleWidget/navigator/DynamicNavigationPage.dart';
void main(a) {
runApp(new MaterialApp(home: new FlutterDemo()));
}
class FlutterDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Journey to the Advancement of Flutter."),
),
body: new Center(
child: new RaisedButton(
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
//_ indicates that the parameter is empty
builder: (_) => new DynamicNaviattionPage(
username: "xiedong",
password: "123456",
))).then((value) {
showDialog(
context: context,
child: new AlertDialog(
content: new Text(value),
));
});
},
child: new Text("Dynamic Route Parameter Transfer")))); }}Copy the codeB Page code:
import 'package:flutter/material.dart';
class DynamicNaviattionPage extends StatelessWidget {
var username;
var password;
DynamicNaviattionPage({Key key, this.username, this.password})
: super(key: key);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Dynamic routing"),
),
body: new Center(
child: new Column(
children: <Widget>[
new MaterialButton(
onPressed: () {
Navigator.pop(context, "The user information was not found");
},
child: new Text("Click me back"),
color: Colors.lightGreen,
),
new Text($username $username),
new Text("Password $password"[[(), [(), [(), [(); }}Copy the codeSummary of routing points
- Flutter routes are divided into static routes and dynamic routes. Static routes do not support transferring parameters to the next page, while dynamic routes can
- Static routes need to be registered in advance to declare the page path.
- Dynamic routing can construct routing objects directly at use without registering paths in advance.
- Both types support receiving values returned from the next page