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 頁面的傳參就已經完成了。