Flutter study notes--routing management

Introduction

Flutter's routing is used to manage a group of interface components with certain entry and exit regulations, so as to realize regular jumps between interfaces, and things that follow this regulation and store routing information are called routing stacks.
Those who are familiar with Android development know Intent, and the interface jump in Android can be realized through Intent. In the project, we can easily realize our own routing management through Intent. In Flutter, this route is the Navigator, which can be used to jump to a certain interface Navigator.push()and return to the previous interface Navigator.pop().

1. Static routing

Static routing is used when it is clear which interface to jump to. routesIt is to define the properties of the routing table, eg:

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: '静态路由',),
      routes: <String, WidgetBuilder>{
    
    
        '/page1': (BuildContext context) => FirstPage(),
        '/page2': (BuildContext context) => SecondPage()
      },
       onUnknownRoute: (RouteSettings settings) {
    
    
        return new MaterialPageRoute(builder: (context) {
    
    
          return new ErrorPage();
        });
      },
    );
  }
}

The routes attribute defines routing table information, which is equivalent to registration. In order to ensure robustness in actual projects, it is necessary to use onUnknowRouteattributes to define routes to jump to error interfaces.

After registering the interface that needs to be jumped, how to jump, the code is as follows:

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: OutlinedButton(
          child: const Text('跳转到page1'),
          onPressed: () {
    
    
            Navigator.pushNamed(context, '/page1');
          },
        ),
      ),
    );
  }

You can directly call Navigator.pushNamed()the method to realize the interface jump, and the second parameter is the key in the key-value pair defined in the routes routing table. And Navigator.push()the way to jump does not need to define the routing table information:

Navigator.push(context, new MaterialPageRoute(builder: (context) {
    
    
    return FirstPage();
});

Jump to an interface call Navigator.push(), then exit an interface and return to the previous interface, Navigator.pop()just call. In Flutter, routing management is in the form of a stack, following the order of "first in, last out", and all will find the previous interface in the stack and return.

Two, dynamic routing

Since there are static routes, there are also dynamic routes. Dynamic routing is mainly used for parameter passing between two interfaces.

Navigator.push(context, new MaterialPageRoute(builder: (context) {
    
    
  return new FirstPage(title: '需要传递的参数');
}));

Add jump animation:

Navigator.push(context, PageRouteBuilder(
      transitionDuration: Duration(milliseconds: 500), 
      pageBuilder: (BuildContext context, Animation animation,
          Animation secondaryAnimation) {
    
    
        return new FadeTransition(
          opacity: animation,
          child: FirstPage() 
        );
      }));
}),