https://www.cnblogs.com/joe235/p/11309063.html
Flutter本身提供了路由機(jī)制容贝，作個人的小型項(xiàng)目跨新，完全足夠了。但是如果你要作企業(yè)級開發(fā)狮惜，可能就會把入口文件變得臃腫不堪前鹅。而再Flutter問世之初摘悴，就已經(jīng)了企業(yè)級路由方案fluro。
flutter_fluro簡介
fluro簡化了Flutter的路由開發(fā)舰绘，也是目前Flutter生態(tài)中最成熟的路由框架蹂喻。
GitHub地址：https://github.com/theyakka/fluro
它出現(xiàn)的比較早啊，是目前用戶最多的Flutter路由解決方案除盏，目前Github上有將近1000Star叉橱，可以說是相當(dāng)了不起了挫以。
引入fluro
在pubspec.yaml文件里者蠕，直接注冊版本依賴，代碼如下掐松。(注意要最新版)
dependencies:
fluro: "^1.5.1"
如果你這個版本下載不下來踱侣，你也可以使用git的方式注冊依賴，這樣頁是可以下載包的(這也是小伙伴提的一個問題)大磺，代碼如下：
dependencies:
fluro:
? git: git://github.com/theyakka/fluro.git
在項(xiàng)目的入口文件抡句，也就是main.dart中引入，代碼如下：
import'package:fluro/fluro.dart';
通過上面的三步杠愧，就算把Fluro引入到項(xiàng)目中了待榔，下面就可以開心的使用了。
初始化Fluro
現(xiàn)在可以進(jìn)行使用了流济，使用時需要先在Build方法里進(jìn)行初始化,其實(shí)就是把對象new出來锐锣。
final router = Router();
編寫rotuer_handler
handler相當(dāng)于一個路由的規(guī)則，比如我們要到詳細(xì)頁面绳瘟，這時候就需要傳遞商品的ID雕憔，那就要寫一個handler。這次我按照大型企業(yè)級真實(shí)項(xiàng)目開發(fā)來部署項(xiàng)目目錄和文件糖声，把路由全部分開斤彼，Handler單獨(dú)寫成一個文件。新建一個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的編寫是路由中最重要的一個環(huán)境，知識點(diǎn)也是比較多的悦施，這里我們學(xué)的只是最簡單的一個Handler編寫翁潘，以后會隨著課程的增加，我們會再繼續(xù)深入講解Handler的編寫方法歼争。
Hanlder只是對每個路由的獨(dú)立配置文件拜马，fluro當(dāng)然還需要一個總體配置文件渗勘。配置好后，我們還需要一個靜態(tài)化文件俩莽，方便我們在UI頁面進(jìn)行使用旺坠。
配置路由
我們還需要對路由有一個總體的配置，比如跟目錄扮超，出現(xiàn)不存在的路徑如何顯示取刃，工作中我們經(jīng)常把這個文件單獨(dú)寫一個文件。在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'; //詳情頁面
? //靜態(tài)方法
? 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靜態(tài)化
這一步就是為了使用方便，直接把Router進(jìn)行靜態(tài)化馁龟，這樣在任何一個頁面都可以直接調(diào)用崩侠，不用再New 去調(diào)用了。
在routers下面新建了application.dart文件坷檩。代碼如下：
import'package:fluro/fluro.dart';
class Application{
? static Router router;
}
靜態(tài)化Router却音，這樣我們在使用的時候就可以直接用 Application.Router就可以了。
現(xiàn)在我們基本就把Fluro的路由配置好了矢炼，這樣的配置雖然稍顯復(fù)雜系瓢，但是跟層次和條理化，擴(kuò)展性也很強(qiáng)句灌。
把路由注冊/注入到頂層
打開main.dart文件夷陋，首頁引入配置文件和靜態(tài)化文件，routes.dart和application.dart胰锌，代碼如下：
import'./routers/routes.dart';
import './routers/application.dart';
引入后需要進(jìn)行賦值骗绕，進(jìn)行注入程序。這里展示主要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,//路由靜態(tài)化
? ? ? ? //----------------主要代碼end
? ? ? ? theme: ThemeData(
? ? ? ? ? primaryColor:Colors.pink,
? ? ? ? ),
? ? ? ? home:IndexPage()
? ? ? ),
? ? );
? }
}
上面代碼就是注入整個程序爹谭，讓我們在任何頁面直接引入application.dart就可以使用。
在首頁使用
現(xiàn)在要在首頁里使用路由榛搔，直接在首頁打開商品詳細(xì)頁面诺凡。
先引入application.dart文件：
import'./routers/application.dart';
然后再火爆專區(qū)的列表中使用配置好的路由，打開商品詳細(xì)頁面details_page.dart践惑。
打開home_page.dart文件腹泌，找到火爆專區(qū)列表里的ontap事件，然后在ontap事件中直接使用application進(jìn)行跳轉(zhuǎn)尔觉，代碼如下：
Application.router.navigateTo(context,"/detail?id=${val['goodsId']}");
這時候可以測試一下凉袱，如果一切正常逾一，應(yīng)該可以打開商品詳細(xì)頁面了诸狭。
總結(jié)：
單獨(dú)寫一個Handler文件顿肺，每個Handler都寫在里面辆憔，每個路由單獨(dú)定義，然后進(jìn)行跳轉(zhuǎn)頁面都是在Handler里做的涤躲。如果有10個頁面棺耍，把10個頁面的Handler都做完了，要到routes.dart文件里去進(jìn)行總體配置define种樱，再進(jìn)行靜態(tài)化蒙袍，然后在主main.dart文件里注入，最后就可以使用了嫩挤。
每添加一個路由害幅，router文件和Handler文件都要進(jìn)行配置。
