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