Flutter Code Tips --- centrally manage routing and navigation

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/hekaiyou/article/details/89475785

Routing and navigation of all pages in the page when more than a Flutter project after jumping around the page, developers themselves will be dizzy, so need to use a centralized, flexible way to manage the project.

We usually use the home page ( home) default routing property of the application, that is, Navigator.defaultRouteNameor /components on the route. Unless the initial routing (specify initialRoute) property, which is otherwise route when the application starts normally displayed first. If you can not display the initial routing ( initialRouterouting attributes), it is also a display of the route.

Another less frequently used in generating the routing ( onGenerateRoute) attribute name is used to route the application navigation route generating callbacks. By custom callback, you can be flexibly configured "What is the name of the navigation route to what page components."

Here we can (through the home page home) property, the initial routing ( initialRoute) in property and generate routing ( onGenerateRouteall pages) property to centrally manage the project jump.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
      initialRoute: '/',
      onGenerateRoute: _getRoute,
    );
  }

  /// 路由（`Route`）是由导航器（`Navigator`）管理的条目的抽象类。
  /// 路由设置（`RouteSettings`）类是一些可能在构建路由时有用的数据。
  Route<dynamic> _getRoute(RouteSettings settings) {
    // RouteSettings.name属性，路由的名称（例如`/settings`）。
    final String name = settings.name;
    // 根路径路由。
    if (name == '/') {
      // Material页面路由（`MaterialPageRoute`）类，通过平台自适应转换替换整个屏幕的模态路由。
      // 对于Android，页面的入口转换会向上滑动页面并淡入其中。退出转换是相同的，但方向相反。
      // 在iOS上，页面从右侧滑入，然后反向退出。当另一页进入以覆盖它时，页面也会在视差中向左移动。
      return MaterialPageRoute(
        // 设置属性，此路由的设置。
        settings: settings,
        // 构建者属性，构建路由的主要内容。
        builder: (BuildContext context) => MyHomePage(),
      );
      // 主页面路由。
    } else if (name == '/home') {
      return MaterialPageRoute(
        settings: settings,
        builder: (BuildContext context) =>
            Scaffold(appBar: AppBar(title: Text('主页面'))),
      );
      // 设置页面路由。
    } else if (name == '/setting') {
      return MaterialPageRoute(
        settings: settings,
        builder: (BuildContext context) =>
            Scaffold(appBar: AppBar(title: Text('设置页面'))),
      );
    } else {
      return null;
    }
  }
}

Then attach the code above MyHomePageclass code.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo 主页'),
      ),
      body: ListView(
        children: <Widget>[
          RaisedButton(
            onPressed: () {
              // 使用命名路由导航到下一个屏幕。
              Navigator.pushNamed(context, '/home');
            },
            child: Text('主页面'),
          ),
          RaisedButton(
            onPressed: () {
              // 使用命名路由导航到下一个屏幕。
              Navigator.pushNamed(context, '/setting');
            },
            child: Text('设置页面'),
          ),
        ],
      ),
    );
  }
}

Finally run the project, the effect is like the following figure shows the move.