Flutter路由fluro引入配置和使用的具體方法

Posted on by

Flutter本身提供瞭路由機制，作個人的小型項目，完全足夠瞭。但是如果你要作企業級開發，可能就會把入口文件變得臃腫不堪。而再Flutter問世之初，就已經瞭企業級路由方案fluro。

flutter_fluro簡介

fluro簡化瞭Flutter的路由開發，也是目前Flutter生態中最成熟的路由框架。

GitHub地址：https://github.com/theyakka/fluro

它出現的比較早啊，是目前用戶最多的Flutter路由解決方案，目前Github上有將近1000Star，可以說是相當瞭不起瞭。

引入fluro

在pubspec.yaml文件裡，直接註冊版本依賴，代碼如下。(註意要最新版)

dependencies:
 fluro: "^1.5.1"

如果你這個版本下載不下來，你也可以使用git的方式註冊依賴，這樣頁是可以下載包的(這也是小夥伴提的一個問題)，代碼如下：

dependencies:
 fluro:
   git: git://github.com/theyakka/fluro.git

在項目的入口文件，也就是main.dart中引入，代碼如下：

import 'package:fluro/fluro.dart';

通過上面的三步，就算把Fluro引入到項目中瞭，下面就可以開心的使用瞭。

初始化Fluro

現在可以進行使用瞭，使用時需要先在Build方法裡進行初始化,其實就是把對象new出來。

final router = Router();

編寫rotuer_handler

handler相當於一個路由的規則，比如我們要到詳細頁面，這時候就需要傳遞商品的ID，那就要寫一個handler。這次我按照大型企業級真實項目開發來部署項目目錄和文件，把路由全部分開，Handler單獨寫成一個文件。新建一個routers文件夾，然後新建router_handler.dart文件

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


Handler detailsHanderl =Handler(
  handlerFunc: (BuildContext context,Map<String,List<String>> params){
    String goodsId = params['id'].first;
    print('index>details goodsID is ${goodsId}');
    return DetailsPage(goodsId);

  }
);

這樣一個Handler就寫完瞭。Hanlder的編寫是路由中最重要的一個環境，知識點也是比較多的，這裡我們學的隻是最簡單的一個Handler編寫，以後會隨著課程的增加，我們會再繼續深入講解Handler的編寫方法。

Hanlder隻是對每個路由的獨立配置文件，fluro當然還需要一個總體配置文件。配置好後，我們還需要一個靜態化文件，方便我們在UI頁面進行使用。

配置路由

我們還需要對路由有一個總體的配置，比如跟目錄，出現不存在的路徑如何顯示，工作中我們經常把這個文件單獨寫一個文件。在routes.dart裡，新建一個routes.dart文件。

代碼如下:

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

class Routes { //配置類
  static String root = '/'; //根目錄
  static String detailsPage = '/detail'; //詳情頁面
  //靜態方法
  static void configureRoutes(Router router){//路由配置
    //找不到路由
    router.notFoundHandler = new Handler(
      handlerFunc: (BuildContext context,Map<String,List<String>> params){
        print('ERROR====>ROUTE WAS NOT FONUND!!!');
      }
    );
    //整體配置
    router.define(detailsPage, handler: detailsHandler); 
  
  }
}

把Fluro的Router靜態化

這一步就是為瞭使用方便，直接把Router進行靜態化，這樣在任何一個頁面都可以直接調用，不用再New 去調用瞭。

在routers下面新建瞭application.dart文件。代碼如下：

import 'package:fluro/fluro.dart';

class Application{
  static Router router;
}

靜態化Router，這樣我們在使用的時候就可以直接用 Application.Router就可以瞭。

現在我們基本就把Fluro的路由配置好瞭，這樣的配置雖然稍顯復雜，但是跟層次和條理化，擴展性也很強。

把路由註冊/註入到頂層

打開main.dart文件，首頁引入配置文件和靜態化文件，routes.dart和application.dart，代碼如下：

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

引入後需要進行賦值，進行註入程序。這裡展示主要build代碼。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //-------------------主要代碼start
    final router = Router(); //路由初始化
    Routes.configureRoutes(router);
    Application.router = router;
    //-------------------主要代碼end
    
    return Container(
      child: MaterialApp(
        title:'百姓生活+',
        debugShowCheckedModeBanner: false,
        //----------------主要代碼start
        onGenerateRoute: Application.router.generator, //路由靜態化
        //----------------主要代碼end
        theme: ThemeData(
          primaryColor:Colors.pink,
        ),
        home:IndexPage()
      ),
    );
  }
}

上面代碼就是註入整個程序，讓我們在任何頁面直接引入application.dart就可以使用。

在首頁使用

現在要在首頁裡使用路由，直接在首頁打開商品詳細頁面。

先引入application.dart文件：

import './routers/application.dart';

然後再火爆專區的列表中使用配置好的路由，打開商品詳細頁面details_page.dart。

打開home_page.dart文件，找到火爆專區列表裡的ontap事件，然後在ontap事件中直接使用application進行跳轉，代碼如下：

Application.router.navigateTo(context,"/detail?id=${val['goodsId']}");

這時候可以測試一下，如果一切正常，應該可以打開商品詳細頁面瞭。

總結：

單獨寫一個Handler文件，每個Handler都寫在裡面，每個路由單獨定義，然後進行跳轉頁面都是在Handler裡做的。如果有10個頁面，把10個頁面的Handler都做完瞭，要到routes.dart文件裡去進行總體配置define，再進行靜態化，然後在主main.dart文件裡註入，最後就可以使用瞭。

每添加一個路由，router文件和Handler文件都要進行配置。

到此這篇關於Flutter路由fluro引入配置和使用的具體方法的文章就介紹到這瞭,更多相關Flutter fluro配置使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：