flutter 路由插件fluro配置及其使用

flutter 路由插件fluro配置及其使用

pubspec.yaml:引入插件

dependencies:
  flutter:
    sdk: flutter
  fluro: "^1.6.3"

1. 首先創建一個router_handler.dart文件，定義路由去到哪個部件，以及傳遞給該部件的參數：

router_handler.dart文件如下：

import 'pagckage:flutter/material.dart';
//引入路由插件fluro 需要在pubspec.yaml文件中配置插件並下載才能引入
import 'pagckage:fluro/fluro.dart';
//引入路由跳轉去到的部件
import '../pages/user.dart';

Handler userHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
  //params是跳轉路由url?後面傳遞的參數，我們需要參數裏面的id值並傳遞給跳轉到的部件內
  return User(params["id"][0]);
});
//下面還可以繼續添加如上的路由跳轉Handler
...

2. 下面就是給路由命名的 routes.dart 文件
routes.dart文件如下：

import 'pagckage:flutter/material.dart';
//引入路由插件fluro 需要在yml文件中配置插件並下載才能引入
import 'pagckage:fluro/fluro.dart';
//引入決定路由跳轉去到而的部件router_handler
import './router_handler.dart';
//沒有對應匹配路由時去的部件
import './page_404.dart';

class Routes {
  static String root = '/';
  static String user = '/user';
  ...
  static void configureRoutes(Router router) {
    //notFoundHandler是匹配不到路由時執行出發的
    router.notFoundHandler = new Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params)) {
       //這是可以定義一個404頁面部件
       return Page404();
    };
    //根路由時去homeHandler部件 當然router_handler.dart裏我沒定義homeHandler，可自行配置
    router.define(root, handler: homeHandler);
    //user路由時去userHandler部件
    router.define(user, handler: userHandler);
    //也可以直接寫路由路徑
    router.define('/user/:id', handler: userHandler);
  }
}

3. 靜態化路由： 目的：使路由靜態化
application.dart 文件如下：

import 'pagckage:fluro/fluro.dart';
class Application{
  static Router router;
}

4. 在main.dart 內注入路由，相當於給全局注入路由

...
import './routers/application.dart';
import './routers/routes.dart';

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

class MyApp extends StatelessWidget {
  //注入路由
  final router = Router();
  Router.congigureRoutes(router);
  Application.router = router;
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      onGenerataRoute: Application.router.generator, //全局注入路由
	  ...	
    );
  }
}

5. 使用路由：

InkWell(
  onTap: (){
     //通過Application的路由就可以跳轉頁面啦
     Application.router.navigateTo(context, "/user?id=${userId}")
  },
  child: ...
)