Flutter 路由库fluro快速入门——从库自带的示例上手
笔者喜欢Flutter的一点就是其各种库的example读起来都很清晰、很好懂，在上手从来没用过的复杂三方库时基本上看看README+example就可以了。
最近笔者参与的大创项目要开始做App开发了，之前定的开发框架是flutter。在准备为项目搭建框架的时候，笔者首先查找了一下flutter中流行的路由框架，经过比较感觉fluro还不错，就开始准备学习和使用fluro了。而昨天在学习fluro库的时候，看了一下其README中的介绍，作者在其中介绍了核心的几个API，包括初始化、配置路由、路由切换API、参数传递等，但是就一个flutter项目如何组织和使用这些API、如何将API和应用组合并没有直接给出说明。经验丰富的flutter开发者想必能在脑海中根据这些API构建出使用路由的最佳实践，但是对刚刚上手flutter的人来说还是需要看看example是怎么写的。幸而作者在仓库中提供了一个被他称作“pretty sweet”的example，那么我们就看看这个example是怎么写的吧。
克隆、打开项目
首先自然是把项目及其example下载下来了。笔者建议读者也一起克隆fluro的项目，因为只有亲自到example里看看，才能理解作者是怎么设计的、为什么要这样用。
git clone https://github.com/lukepighetti/fluro.git
用IDEA或者其他什么编辑器打开。
IDEA会提示我们运行flutter pub get，但是运行之后就马上收到警报了：
显然这个example有点旧了。不过，在笔者写文的时候，只需要改一下AndroidManifest.xml里的android:name"字段就可以正常编译运行了，至于改成什么还请参见官方的指南：Upgrading-pre-1.12-Android-projects。
App架构
在处理完Android里面的麻烦事之后，我们可以考虑启动模拟器，然后运行一下看看。笔者写文的时候正在用Mac电脑，所以就用iOS来运行了：
性能很棒，动画（渐变）也很流畅。那么，我们该如何在项目（或新项目）里用上这个路由库呢？
首先看看main.dart吧：
void main() {
runApp(AppComponent());
}
非常短小精悍，只有一行runApp。
AppComponent定义在components/app/app_component.dart下，它的内容也很精悍：
class AppComponent extends StatefulWidget {
@override
State createState() {
return AppComponentState();
}
}
class AppComponentState extends State<AppComponent> {
AppComponentState() {
final router = FluroRouter();
Routes.configureRoutes(router);
Application.router = router;
}
@override
Widget build(BuildContext context) {
final app = MaterialApp(
title: 'Fluro',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
onGenerateRoute: Application.router.generator,
);
// print("initial route = ${app.initialRoute}");
return app;
}
}
绝大部分都和标准的MaterialApp大差不差，不过在构造函数里它做了这件事情：
final router = FluroRouter();
Routes.configureRoutes(router);
Application.router = router;
三行代码里似乎做完了路由的初始化和配置，让我们看看它们具体做了什么吧。
第一行：final router = FluroRouter();。这没有什么好说的，它就只是新建了一个FluroRouter对象。
第二行：Routes.configureRoutes(router);。看起来调用了一个叫做Routes的类里面的静态方法，router在里面被进行了配置。
第三行：Application.router = router;。看起来，router被赋给了一个叫做Application的类中。
让我们先看看这个叫做Application的类吧。作为之前经常写Java的人，笔者刚开始误以为这个Application是dart里的一个API（或者其他类似的东西），按住Ctrl点了它之后才发现这原来是作者定义的一个类。这个类定义在config目录下的application.dart里，内容不过寥寥几行：
class Application {
static late final FluroRouter router;
}
router的三个修饰符static late final很有趣，它们表示router是一个静态的成员（不需要实例化Application类就能调用），具有延迟初始化的特点（虽然标记了final但可以被赋值一次）。
作者在example中配置完路由之后，把路由对象保存在了这里，接下来我们就可以访问这个对象来使用路由功能了。
其他值得注意的地方还有在AppComponent中，作者为MaterialApp配置了onGenerateRoute属性：
final app = MaterialApp(
title: 'Fluro',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
onGenerateRoute: Application.router.generator,
);
路由配置
接下来看看作者怎么配置路由的。在上一部分中，我们提到作者调用了类Routes里面的静态方法，router在里面被进行了配置。接下来，我们看看这个类（位于config目录下的routes.dart中）：
class Routes {
static String root = "/";
static String demoSimple = "/demo";
static String demoSimpleFixedTrans = "/demo/fixedtrans";
static String demoFunc = "/demo/func";
static String deepLink = "/message";
static void configureRoutes(FluroRouter router) {
router.notFoundHandler = Handler(
handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
print("ROUTE WAS NOT FOUND !!!");
return;
});
router.define(root, handler: rootHandler);
router.define(demoSimple, handler: demoRouteHandler);
router.define(demoSimpleFixedTrans,
handler: demoRouteHandler, transitionType: TransitionType.inFromLeft);
router.define(demoFunc, handler: demoFunctionHandler);
router.define(deepLink, handler: deepLinkHandler);
}
}
这个类主要由两个部分组成：定义各个路由的路径，并把他们和路由处理器关联。值得注意的是，未匹配到路由时的行为也被进行了配置。
路由处理器（Handler）在另外一个文件（route_handlers.dart）中被定义。以主页为例：
var rootHandler = Handler(
handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
return HomeComponent();
});
看起来，这个Handler的构造函数接受一个叫做handlerFunc（处理函数）的参数，它的类型是一个返回Widget（可选）的函数，并且具有两个参数：context（上下文）和params（参数）。上下文目前笔者还不太熟悉，只是在使用Provider来做状态管理时用到过；params则应该是可以接受诸如/demo/func?message=$result中的message的query参数。开发过uniapp、传统Vue和React的开发者估计对它都不会陌生。
handlerFunc中返回的东西估计大家就不会感到陌生了吧，这就是代表这个路由页面的Widget。
除了这种简单的路由之外，还可以读取和处理参数:
var demoRouteHandler = Handler(
handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
String? message = params["message"]?.first;
String? colorHex = params["color_hex"]?.first;
String? result = params["result"]?.first;
Color color = Color(0xFFFFFFFF);
if (colorHex != null && colorHex.length > 0) {
color = Color(ColorHelpers.fromHexString(colorHex));
}
return DemoSimpleComponent(
message: message ?? 'Testing', color: color, result: result);
});
API设计得很清晰，大家想必并不需要笔者做太多赘述就能理解它的用法。
它甚至可以直接在handlerFunc中显示组件，然后返回一个空值：
var demoFunctionHandler = Handler(
type: HandlerType.function,
handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
String? message = params["message"]?.first;
showDialog(
context: context!,
builder: (context) {
return AlertDialog(
title: Text(
"Hey Hey!",
style: TextStyle(
color: const Color(0xFF00D6F7),
fontFamily: "Lazer84",
fontSize: 22.0,
),
),
content: Text("$message"),
actions: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 8.0, right: 8.0),
child: TextButton(
onPressed: () {
Navigator.of(context).pop(true);
},
child: Text("OK"),
),
),
],
);
},
);
return;
});
}
最后，根据它的说明，路由工具支持处理deep link：
/// Handles deep links into the app
/// To test on Android:
///
/// `adb shell am start -W -a android.intent.action.VIEW -d "fluro://deeplink?path=/message&mesage=fluro%20rocks%21%21" com.theyakka.fluro`
var deepLinkHandler = Handler(
handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
String? colorHex = params["color_hex"]?.first;
String? result = params["result"]?.first;
Color color = Color(0xFFFFFFFF);
if (colorHex != null && colorHex.length > 0) {
color = Color(ColorHelpers.fromHexString(colorHex));
}
return DemoSimpleComponent(
message: "DEEEEEP LINK!!!", color: color, result: result);
});
handlerFunc中并没有进行特殊的设置，想必按照注释里的那个deep link的格式就能直接访问到这个路由。
路由操作
定义了路由其实只是完成了一半；不能去任何地方的路由毫无意义。所以，接下来我们看看example项目中是怎么使用路由对象来进行跳转和其他操作的。
首先看看最基础的navigateTo功能怎么用：
Application.router.navigateTo(context, "/demo/func?message=$result");
很清晰，很简单。router是刚刚讨论过的Application类中来的，调用的方法是navigateTo。第一个参数是当前的context，直接传就好了；第二个是路由的路径，并且如读者所见，可以带params。
高级用法：
Application.router.navigateTo(
context,
"/demo?message=$message&color_hex=$hexCode",
transition: TransitionType.custom,
transitionBuilder: transition,
transitionDuration: const Duration(milliseconds: 600),
);
作者在这里定义了渐变的类型（TransitionType.custom），渐变的提供者：（transition），渐变的时长（600ms）。
渐变提供者的定义在这里，可以看到组合了ScaleTransition和RotationTransition：
var transition = (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
return ScaleTransition(
scale: animation,
child: RotationTransition(
turns: animation,
child: child,
),
);
};
最后，值得一提的是，example项目中用到的渐变类型还有这几种：
TransitionType.native // 顾名思义，就是native的渐变类型
TransitionType.inFromLeft
TransitionType.fadeIn
读者阅读到这里，想必已经能够大体掌握这个项目的用法，包括它的最佳实践、项目结构等。希望这篇文章对你有帮助。