The paper

This article is suitable for beginners who already have a brief understanding of Flutter

Official website of the Navigator

The official website has a long page, which is very unfriendly to beginners. The English level of xiaobian may still stay at the point of nice to meet your. This column I’m going to omit… But I have Google Translate (not really advertising)

Let me briefly explain the concept of a Router in Flutter before we say Navigator

Router

Routing is an abstraction of the screen interface. For example, ‘/home’ takes you to the home page, and ‘/login’ takes you to the landing page. In short, each interface has a corresponding Page. We can regard the Router as a class. Each student is a person registered in the class, either by the teacher calling the student by name, or by the teacher calling the student out by hand without calling the student by name. We declare several routes in some subflutter demo application

MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: MyHomePage(title: 'Flutter Demo Home Page'),
    routes: <String, WidgetBuilder> {
        '/xiaoming': (_) => new XiaoMingPage(),
        '/lili': (_) => new LiLiPage(),
    },
);
Copy the code

The management of the Router

With the students, it will involve the management of students, otherwise every student has no rules, the whole class will be very chaotic. Some students want to sit in the first row, some students want to sit in the last row, the whole classroom will become a pot of porridge. And that’s where our hero of the day, Navigator, comes in.

Navigator

Navigator is used to manage stack functions (push and POP)

If you have a basic understanding of stacks, then you know push, which adds an element to the top of the stack, and POP, which removes the top element from the same stack.

So in the case of Flutter, when we navigate to another screen, we use the navigator.push method to add the new screen to the top of the stack. Of course, these POP methods remove the screen from the stack. Here, let’s see how to move from screen 1 to screen 2 in the diagram above.

Initial state:

Click Xiaoming to roll out and push Xiaoming’s interface into the stack

If you click the back button at the top or android’s back button, Flutter will default to the flutter. Pop method to bring up the small screen

Click Xiaoli to roll out and enter the interface of Push Xiaoli to push

conclusion

Actually, I haven’t finished it yet

Write here, you may feel small editor said, a certain degree of a grasp. No dry goods, small preparation out of pure mix face familiar, then the next dry goods.

push
pushName

A static method

Here are the static methods on Navigator’s website, and I’ll walk you through some of the highlights.

maybePop

If you pop up the only interface in the stack on the home page of your app (there’s only one element in the stack), congratulations, you can go to financial settlement tomorrow. To avoid this problem, we can call the maybePop() method. This method can be tried to play, play does not go to pull down the method.

RaisedButton(onPressed: () {navigator.maybepop (context); }, child: Text("Test maybePop on the stack"),), // Drop pop RaisedButton(onPressed: () {navigator.maybepop (context); }, child: Text("Stack head test maybePop"RaisedButton(onPressed: () {navigator.pop (context); }, child: Text("Direct pop ()"),),Copy the code

canPop

I’ll put canPop after maybePop. CanPop returns false only if there is only one element in the stack, and true for all other elements.

Navigator.canPop(context) ? Navigator.pop(context): null;
Copy the code

Push and pushNamed

Push works the same as pushNames, except that the interface is called differently, pushing an interface onto the stack. The difference is that a push pushes the interface onto the stack by hand, whereas a pushNames pushes the interface onto the stack by name via the Router.

// Navigator. Push (Context, new MaterialPageRoute(Builder: (context) {return Scaffold(
        appBar: AppBar(
          title: Text('I am the new interface'))); })); // Call method of pushNamed // define Page on Router; routes: <String, WidgetBuilder> {'/xiaoming': (_) => new XiaoMingPage(),
}
...
Navigator.pushNamed(context, '/XiaoMingPage');
Copy the code

PushReplacement and pushReplacementNamed

Again, both are used to replace the top element in the current stack. It’s just that the interface is called differently. This point is not to say more. The effect of the demo, in the second test page after clicking the button. Jump to the new screen, click back again, we are back to the home page

PushAndRemoveUntil and pushNamedAndRemoveUntil

When we build a very complex application, users log in, scroll, view all kinds of information… The user wants to log off and return to the front page, you can’t simply push a front page, in which case you should remove all the routes in the stack so that the user cannot return to the previous interface after logging off. The method in the official Demo goes back to the bottom of the stack and adds a MyHomePage.

// flutter sample
void _finishAccountCreation() {
  Navigator.pushAndRemoveUntil(
    context,
    MaterialPageRoute(builder: (BuildContext context) => MyHomePage()),
    ModalRoute.withName('/')); }Copy the code

popUntil

When we build a multi-form creation scenario, a user needs to fill out different forms on different pages in sequence, and when the user reaches the third Page, the user decides to cancel the form, the desired logic is to return to the Page before the form was filled in.

Navigator.popUntil(context, ModalRoute.withName('/Dashboard'));
Copy the code

Unfinished to be supplemented

I am also a beginner. If there is any incorrect place, you are welcome to criticize. The author will improve this article with a deeper understanding and discovery.

Demo Code