Flutter 学习笔记《插件篇》：路由插件 fluro

使用 fluro 路由插件，能够帮助咱们更方便快捷的实现 Flutter 应用页面间的跳转和传值等功能。

1. 项目引入 fluro

Flutter 应用中要使用任何第三方插件，都须要先在项目中进行引入。

打开项目根目录中的 pubspec.yaml 文件，在 dependencies 属性下面添加 fluro 的配置代码：

dependencies:
  fluro: ^1.6.3

参考代码截图以下：

说明：1.6.3 是当前（2020.04.13）fluro 的最新版本号，你们之后在使用时，建议先去 官网看看最新的版本号是多少，配置的时候就改为最新版本号便可。

2. fluro 的基本使用

fluro 最基本的功能就是“跳转页面”，其余的“传值”、“返回”等功能对于咱们菜鸡来讲都是高级操做了，因此先不谈。咱们先来学基操！

2.1 创建路由文件

通常状况下，咱们都会在项目的 lib 目录中建立一个的新的文件夹（例如：lib/routers），专门用来存放与路由相关的配置代码。

2.2 路由配置

建立一个 lib/routers/routes.dart 文件用来进行路由的相关配置：

import 'package:flutter/material.dart';
// 引入 fluro
import 'package:fluro/fluro.dart';
// 引入路由要跳转的页面文件
import 'package:flutter_fluro_demo/home_page.dart';
import 'package:flutter_fluro_demo/login_page.dart';

class Routes {
  // 各个页面的路径字符串
  static String home = '/home';
  static String login = '/login';
  // 建立一个 configureRoutes 方法，用于路由配置
  static void configureRoutes(Router router) {
    // 配置 home 首页路由
    router.define(home, handler: Handler(
        handlerFunc: (BuildContext context, Map<String, List<String>> params) {
          return HomePage();
        },
      ),
    );
    // 配置 login 登陆页路由
    router.define(login, handler: Handler(
        handlerFunc: (BuildContext context, Map<String, List<String>> params) {
          return LoginPage();
        }
      ),
    );
  }
}

在这个配置文件里，咱们以“首页”和“登陆页”为例，作了一个最基础的路由配置。

2.3 路由静态化处理

为了方便咱们后面在各个页面中使用路由，我建议（官方也建议）先对路由作一个静态化处理。

在 lib/routers 中再建立一个 application.dart 文件，添加如下代码：

import 'package:fluro/fluro.dart';

class Application {
  static Router router;
}

在这段代码中，咱们建立了一个 Application 对象，并设置了一个静态属性 router。

在下一步全局注入路由的时候，咱们会把调用 Router() 方法获得的路由对象保存在 Application.router 属性中。这样，在后续各个页面中使用路由时，就能够直接经过 Application.router 来拿到路由对象，而不须要反复调用 Router() 方法了。

2.4 全局注入路由

各项配置完成以后，接下来就须要在项目入口文件 main.dart 中注入路由来使咱们的路由生效。

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter_fluro_demo/routers/routes.dart'; // 路由配置文件
import 'package:flutter_fluro_demo/routers/application.dart';  // 路由静态化文件

void main() {
  final router = Router();  // 获取路由对象
  Routes.configureRoutes(router);  // 调用路由配置方法
  Application.router = router;  // 将路由对象静态化
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: Application.router.generator,  // 将路由配置到 MaterialApp 中
      // ...
    );
  }
}

2.5 路由跳转

fluro 中最简单的跳转方式就是经过 navigateTo() 方法来实现：

import 'package:flutter_fluro_demo/routers/application.dart';
// ...
Application.router.navigateTo(context, '/');

参考代码截图以下：

到这一步，咱们一个最简单的路由跳转就实现啦。

3. fluro 的进阶使用

路由的基本使用学会了以后，接下来咱们就须要增长一丢丢的难度了。

3.1 拆分路由配置文件

在前面的路由基础用法里，咱们将全部关于路由的配置都放在了 routes.dart 文件中，当咱们项目的页面逐渐增多时，就会致使这个文件变得愈来愈大，代码愈来愈多，后期维护起来也会愈来愈不方便。

因此，咱们要对 routes.dart 文件中的代码进行拆分。

routes.dart 本来的代码以下：

从图中代码能够看到，路由操做的大部分代码都集中在了 handler 属性中，所以，咱们就把每个 handler 属性的属性值都提取出去。

在 lib/routers 中再建立一个文件：route_handlers.dart，将拆分出来的代码放进去：

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';

import 'package:flutter_fluro_demo/home_page.dart';
import 'package:flutter_fluro_demo/login_page.dart';

Handler homeHandler = Handler(
  handlerFunc: (BuildContext context, Map<String, List<String>> params) {
    return HomePage();
  },
);

Handler loginHandler = Handler(
  handlerFunc: (BuildContext context, Map<String, List<String>> params) {
    return LoginPage();
  },
);

这样拆分后，咱们本来的 routes.dart 文件就变得很干净了。

import 'package:fluro/fluro.dart';
import './route_handlers.dart';

class Routes {
  static String home = '/home';
  static String login = '/login';

  static void configureRoutes(Router router) {
    router.define(home, handler: homeHandler);
    router.define(home, handler: loginHandler);
  }
}

3.2 路由传参

虽然咱们把路由传参划分到了进阶用法里，可是实际上咱们应该都清楚，任何一个 App 里，路由传参功能都是必不可少的。更况且，fluro 的路由传参其实 so easy～

路由传参其实简单理解为一个点外卖的过程。例如咱们要将 home 页面的数据传递 detail 页面，那么 home 页面就是商家，detial 页面就是成天宅在家里扣 jio 的你，而 fluro，就是咱们的外卖骑手。

理解了传参的流程以后，接下来咱们就能够开始搬砖了。

第一步：在 detial 页面配置要接收的参数

detail 页面中的代码以下：

import 'package:flutter/material.dart';

class DetailPage extends StatelessWidget {
  DetailPage({this.detailId});
  final String detailId;

  //...
}

这里咱们定义了一个 detailId，用来接收后面 home 传递过来的参数。

个人案例代码截图以下：

第二步：在 home 页面设置要传递的参数

home 页面的路由跳转和传参代码以下：

RaisedButton(
  child: Text('去详情页'),
  onPressed: () {
    Application.router.navigateTo(context, '/detail/001');
  },
),

/detail/001 中的 /detail 就是咱们要去到的 detail 页面的路径，001 就是咱们要传递给 detail 页面的参数。

第三步：在路由配置文件中对 detail 路由进行配置

打开 lib/routers/routes.dart 文件，对 detail 的路由进行以下配置：

class Routes {
  // ...
  static String detail = '/detail/:id';

  static void configureRoutes(Router router) {
    // ...
    router.define(detail, handler: detailHandler);
  }
}

参考代码截图以下：

（detailHandler 报错是由于咱们还没建立这个变量，下一步建立好就不会报错了。）

/detail/:id 中的 id 是咱们本身定义的一个参数名，是对 home 页面传递的参数进行命名。

接下来，再打开 lib/routers/routes_handlers.dart 文件，配置 detail 的 handler 方法。

import 'package:flutter_fluro_demo/detail_page.dart';
// ...
Handler detailHandler = Handler(
  handlerFunc: (BuildContext context, Map<String, List<String>> params) {
    String id = params['id'].first; // 经过 params 获取到路由中传递的参数
    return DetailPage(detailId: id);
  },
);

到此，咱们 home 页面，经过路由往 detail 页面的传参就已经完成了。