fluro是flutter生態(tài)中比較優(yōu)秀的一個(gè)路由管理框架帅矗，包含以下特點(diǎn)：
- Simple route navigation
- Function handlers (map to a function instead of a route)
- Wildcard parameter matching
- Querystring parameter parsing
- Common transitions built-in
- Simple custom transition creation
簡(jiǎn)單翻譯以下：
- 簡(jiǎn)單的路由導(dǎo)航
- 函數(shù)處理程序（映射到函數(shù)而不是路由）
- 通配符參數(shù)匹配
- 內(nèi)置常見(jiàn)轉(zhuǎn)換
- 簡(jiǎn)單的自定義過(guò)渡創(chuàng)建
開(kāi)始安裝
打開(kāi)項(xiàng)目根路徑中的pubspec.yaml文件，并在dependencies下面增加fluro的依賴：fluro: ^1.6.0浩习，后面的版本號(hào)根據(jù)fluro最新版本填入咒唆。然后運(yùn)行flutter pub get锭环。至此禾酱，安裝就完成了，可以直接在代碼中引入并使用霉赡。
路由規(guī)劃
- splash app啟動(dòng)頁(yè)面
- login 登陸界面
- home 登陸后首頁(yè)
- detail 詳情頁(yè)
代碼修改
main.dart文件將不必要的文件刪除橄务，改為：
import 'package:flutter/material.dart';
import 'app.dart';
void main() => runApp(MyApp());
并且新增 app.dart文件，用以包含路由配置：
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'pages/detail/detail.dart';
import 'pages/home/home.dart';
import 'pages/login/login.dart';
import 'pages/not_found/not_found.dart';
import 'pages/splash/splash.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
routes: {
//Map<String, WidgetBuilder>
"/splash": (context) => new SplashPage(),
"/login": (context) => new LoginPage(),
"/home": (context) => new HomePage(),
"/detail": (context) => new DetailPage(),
},
onUnknownRoute: (RouteSettings setting) {
String name = setting.name;
print("onUnknownRoute:$name");
return new MaterialPageRoute(builder: (context) {
return new NotFoundPage();
});
},
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new SplashPage(),
);
}
}
再根據(jù)目錄創(chuàng)建相應(yīng)的page頁(yè)面穴亏，此處不贅述：
image
并在頁(yè)面中顯示相應(yīng)內(nèi)容蜂挪，
本文為原創(chuàng)文章，轉(zhuǎn)載請(qǐng)保留原出處嗓化。原文地址：https:/eatong.cn/blog/17
