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文件都要進行配置。