Routing is involved in single page applications on the Web and is used to manage page-to-page jumps and parameter transfers, such as vue/ React. The routing in flutter also borrows from the front-end idea.

There are two types of FLUTTER routes. One is registered directly without passing parameters. The other way is to construct your own instance and pass parameters. Routes are classified into static routes and dynamic routes.

Only static routes are introduced.

Static routing

In a MaterialApp-style APP, main.dart is the entry file to the program that defines the route list.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter routing',
      routes: {
        '/page1': (context) => Page1(),
        '/page2': (context) => Page2()
      },
      onUnknownRoute: (RouteSettings setting) {
        String name = setting.name;
        print("Route not matched :$name");
        return new MaterialPageRoute(builder: (context) {
          return newErrorPage(); }); }, home: Page1() ); }}Copy the code

In this code:

  • Title: navigation bar title
  • Routers: Routing table. Page1 and page2 are static routes defined by us. The essence of routes is Map.
  • OnUnknownRoute: ErrorPage defined here when jumping to a route that does not exist.
  • Home: the APP starts the default route.

PUSH the jump

pushNamed

In vue.js, vue-router is used:

this.$router.push({
  name: "page1"
});
Copy the code

If name is specified, you can jump to the corresponding route.

So in flutter, we can jump by pushNamed.

Navigator.pushNamed(context, "page2");
Copy the code

If you want a jump with arguments, just add arguments.

Navigator.pushNamed(
    context,
    "page2",
    arguments: {
      "name": 'hello'
    });
Copy the code

Then, route parameters can be obtained by:

var args=ModalRoute.of(context).settings.arguments;
Copy the code

pushReplacementNamed

Replace is the same as vue-router. In a nutshell: replace. To switch to another route, disable the current route.

Navigator.pushReplacementNamed(context, "page2");
Copy the code

pushNamedAndRemoveUntil

Application scenario: After opening an APP, the APP startup page will appear, and then the welcome page will be displayed. Finally, the APP home page will be displayed. In this case, if the user keeps pressing back, they should exit the APP from the home page instead of going to the welcome and startup pages.

Navigator.pushNamedAndRemoveUntil(
  context,
  '/LoginScreen',
  (Route<dynamic> route) => false));Copy the code

POP back

In some service scenarios, page A is redirected to page B. After page B performs operations, the operation result is sent to page A.

In this case, a route with a parameter return is required.

Navigator.pop(context, "My page of data.");
Copy the code

Parameters are also obtained by:

var args=ModalRoute.of(context).settings.arguments;
Copy the code

The interpretation of the class

  • Route

    An application abstract screen or Page commonly used in mobile development to represent the Page of a mobile application.

  • PageRoute

    An abstract class that represents a modal routing page that takes up the entire screen space. It also defines interfaces and properties related to transition animations during route construction and switching.

  • MaterialPageRoute

    Inherited from the PageRoute class, it is a Widget of the Material component library, which can be used for different platforms to implement the same style of platform page switch animation route switch animation.

  • Navigator

    Flutter is a routing widget developed for Flutter applications that manages a collection of routing widgets via a stack. Navigator provides a number of methods to manage the routing stack, and you can use push and POP to push and pop pages.

  • ModalRoute

    A class that can deal with the previous route, which contains the entire Navigator class.

  • PageRouteBuilder

    Custom Route

  • RouteSettings

    Contains route configuration information, such as route name and initial route (home page).