This is the 15th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Xiao CAI has been taking time to study recentlyFlutter, starting from scratch, step by step are very difficult, a few days ago built a basic [login] page, now learn the next step, the jump between pages; Let’s tidy up the side dishes todayFlutterThis section describes how to jump to a page during a test. The most authoritative source is alwaysFlutter website, very essence, but it is a pity that the English level of xiao CAI is too poor, it is a little difficult to read. But as Xiao CAI learns,FlutterMiddle jump must be usedNavigator, like Intent in Android; The side dish is understood to be a stack, in and out is very similar to Android, andFlutterIt’s also straightforward. The key word ispush 和 pop, side dishes are tested from these two keywords respectivelyFlutterJump between pages.

A push into the stack

1. Static register jump Using named navigator routes

Using static registration methods, adding rount method need to be on the home page, side feels a bit like the AndroidManifest intnt – static registration in the filter; The => method in Flutter is much like the -> reduction line in Kotlin.

routes: {
    'forgetPwdRoute': (BuildContext context) => new ForgetPwdPage(),
    'homeRoute': (BuildContext context) => new HomePage(),
},
Copy the code

1.1 The pushNamed method simply jumps to the page

Navigator.pushNamed contains two parameters, the first is understood as the context, the second parameter is the corresponding page name of the static registration; Such as:

onTap: () {
    Navigator.pushNamed(context, "forgetPwdRoute");
},
Copy the code
1.2 pushNamedAndRemoveUntil jumps to the page and destroys the current page

The Navigator. PushNamedAndRemoveUntil contains three parameters, the first side as the context, the second parameter for static registration corresponds to the name of the page, the third argument for jump after operation, the route = = null as the destruction of the current page; Such as:

onPressed: () {
    Navigator.pushNamedAndRemoveUntil(context, "homeRoute", (route) => route == null);
}
Copy the code

      Tips:If you call navigator.pop (context) in a HomePage page; A half-black screen appears, so it’s not recommended to destroy the page this way, but hitting the back button is normal.

2. Dynamically register hops

2.1 The push method simply jumps to the page

When Navigator. Push jumps to the next page, it can pass parameters and generate page objects by itself. Such as:

onPressed: () { Navigator.push<Object>(context, new MaterialPageRoute( builder: (BuildContext context) { return new HomePage(); },),); }Copy the code
2.2 The push method simply jumps to the page and passes parameters
onPressed: () { Navigator.push<String>( context, new MaterialPageRoute( builder: (BuildContext context) { return new ForgetPwdPage(pwd: "123456"); },),); }Copy the code

2.3 pushAndRemoveUntil Jumps to the page and destroys the current page

The Navigator. PushAndRemoveUntil page jump down, pass a parameter or more after the jump of operation; Such as:

Navigator.pushAndRemoveUntil(context,
    new MaterialPageRoute(
  builder: (BuildContext context) {
    return new HomePage();
  },
), (route) => route == null);
Copy the code

Pop out of the stack

Pop destroys the current page

Navigator.pop can have one or two arguments, if only one, for the context; If there are two arguments, the second argument is the return value content, can be multiple types.

onPressed: () { Navigator.pop(context); // Navigator.pop(context, ['a,b,c']); // Navigator. Pop (context, 'this is a HomePage page '); },Copy the code

2. PopAndPushNamed destroys the current page and redirects to a new page

The Navigator. PopAndPushNamed the first parameter to the context, the second parameter for static registration jump page names; Such as:

onPressed: () {
    Navigator.popAndPushNamed(context, 'forgetPwdRoute');
}
Copy the code

When using the return value, note whether the previous page has been destroyed, otherwise an exception will be reported.

Then the return value

When Navigator. Pop is set on the page after the jump, then keyword can be used to receive the return value. The test is as follows:

// MyApp() onPressed: () { // Navigator.pushNamed(context, 'homeRoute').then((Object result) {} Navigator.push<Object>(context, new MaterialPageRoute( builder: (BuildContext context) { return new HomePage(); })).then((Object result) { showDialog( context: context, builder: (BuildContext context) { String str = result.toString(); Return new AlertDialog(content: new Text(" $STR "),); }); }); } // HomePage() onPressed: () { Navigator.pop(context, ['a,b,c']); }Copy the code

The main source

Skipping page:
OnPressed: () {// Navigator. PushNamed (context, 'homeRoute'); // Navigator. PushNamed (context, 'homeRoute'). Then ((Object result) {// showDialog(// context: context, // builder: (BuildContext context) { // String str = result.toString(); // return new AlertDialog(// content: new Text(" You are returning $STR "), //); / /}, / /); / /}); Under the name / / jump page, and destroy the current page. / / the Navigator pushNamedAndRemoveUntil (/ / the context, "homeRoute", (route) = > route = = null); // MaterialPageRoute <Object>(// context, // new MaterialPageRoute(// Builder: (BuildContext context) { // return new HomePage(); }, //), //); // Navigator <Object>(Context, new MaterialPageRoute(Builder: (BuildContext context) { return new HomePage(); })).then((Object result) { showDialog( context: context, builder: (BuildContext context) { String str = result.toString(); Return new AlertDialog(content: new Text(" $STR "),); }); }); / / push way jump page directly, and the destruction of the current page. / / the Navigator pushAndRemoveUntil (context, / / new MaterialPageRoute (/ / builder: (BuildContext context) { // return new HomePage(); // }, // ), (route) => route == null); }Copy the code
The page is displayed and parameters are uploaded
OnTap: () {// simply jump page // navigator.pushnamed (context, "forgetPwdRoute"); // Pass the parameter Navigator. Push <String>(Context, new MaterialPageRoute(Builder: (BuildContext context) { return new ForgetPwdPage(pwd: "123456"); },),); },Copy the code
Destruction of the page
OnPressed: () {// pop a parameter to destroy the current page // navigator.pop (context); // Navigator. Pop (context, ['a,b,c']); // pop returns a string navigator. pop(context, 'HomePage'); / / popAndPushNamed destruction of the current page and new page/jump/the Navigator popAndPushNamed (context, 'forgetPwdRoute'); },Copy the code

      GitHub Demo

Xiao CAI has not been in touch with Flutter for a long time, and there are still many unclear and ununderstood aspects. I hope to point out more if there are wrong aspects.

Source: Little Monk A Ce