https://pub.dev/packages/fluro
https://github.com/lukepighetti/fluro

Fluro作为一款优秀的Flutter企业级路由框架，Fluro的使用比官方提供的路由框架要复杂一些，但是却非常适合中大型项目。

依赖

  1. dependencies:
  2.   fluro: ^1.7.8
  4. # 如果无法使用上面的方式添加Fluro依赖，还可以使用git的方式添加Fluro依赖
  5. dependencies:
  6.  fluro:
  7.    git: git://github.com/theyakka/fluro.git

导入

  1. import 'package:fluro/fluro.dart';

使用

lib/main.dart

  1. import "package:flutter/material.dart";
  3. import 'package:fluro/fluro.dart';
  4. import 'package:app1/routes/routes.dart';
  5. import 'package:app1/routes/application.dart';
  7. void main() {
  8.   final router = FluroRouter();    //实例化路由
  9.   Routes.configureRoutes(router); //导入路由
  10.   Application.router = router; //路由静态化，以方便全局调用
  12.   runApp(MyApp());
  13. }
  15. class MyApp extends StatelessWidget {
  16.   @override
  17.   Widget build(BuildContext context) {
  18.     return MaterialApp(
  19.       initialRoute: '/', //默认路由
  20.       onGenerateRoute: Application.router.generator,
  21.     );
  22.   }
  23. }

lib/routes/application.dart 路由静态化

  1. import 'package:fluro/fluro.dart';
  3. class Application {
  4.   static FluroRouter router;
  5. }

lib/routes/routes.dart 静态路由总体配置

  1. import 'package:fluro/fluro.dart';
  2. import 'package:app1/routes/application.dart';
  3. import 'package:app1/routes/route_handles.dart';
  5. class Routes {
  6.   static configureRoutes(FluroRouter router) {
  7.     // 没有发现路由页面时处理
  8.     router.notFoundHandler = Handler(
  9.       handlerFunc: (context, params) {
  10.         return Text('没有发现路由页面 $params');
  11.       },
  12.     );
  14.     router.define('/', handler: appStartHandler);    // 启动页（动画结束后，自动跳至首页）
  15.     router.define('/home', handler: homeHandler);    // 首页
  16.     router.define('/test', handler: testHandler);
  17.     router.define('/search', handler: searchHandler);
  18.     router.define('/webview', handler: webviewHandler);
  19.   }
  21.   /*
  22.    * 对参数进行encode，解决参数中有特殊字符；   Fluro会自动解码，不需再额外处理。
  23.    * 示例 1： Routes.navigateTo(context, '/aa', params: {id: 1, title: '我是中文标题'});
  24.    * 示例 2： Routes.navigateTo(context, '/aa', arguments: {id: 1, title: '我是中文标题'});
  25.    * 
  26.    * 注意：params方式、RouteSettings方式不能并存，传参时优先考虑使用params方式；
  27.    *      如果params不满足使用，再用RouteSettings方式。例如首页"/",无法使用params传参，即可使用RouteSettings方式.
  28.   */
  29.   static Future navigateTo(
  30.     BuildContext context,
  31.     String path, {    //路由名称
  32.     Map<String, dynamic> params, //search参数
  33.     bool replace = false, //是否替换当前路由栈
  34.     bool clearStack = false, //是否清空路由栈
  35.     Duration transitionDuration = const Duration(milliseconds: 250), //动画周期
  36.     RouteTransitionsBuilder transitionBuilder,
  37.     TransitionType transition = TransitionType.material, //动画方式
  38.     Map arguments, //RouteSettings 方式传参
  39.   }) async {
  40.     String query = "";
  42.     if (params != null) {
  43.       int index = 0;
  44.       for (var key in params.keys) {
  45.         if (params[key] != null) {
  46.           var value = Uri.encodeComponent(params[key].toString());
  47.           if (index == 0) {
  48.             query = "?";
  49.           } else {
  50.             query = query + "\&";
  51.           }
  52.           query += "$key=$value";
  53.           index++;
  54.         }
  55.       }
  56.     }
  57.     path = path + query;
  58.     print('跳转的页面 => $path'); //我是navigateTo传递的参数：?id=11&title=%E6%9C%B1%E6%9C%9D%E9%98%B3
  60.     return Application.router.navigateTo(
  61.       context,
  62.       path,
  63.       replace: replace, // 是否替换当前页面
  64.       clearStack: clearStack, // 是否情况页面存储栈信息
  65.       transitionDuration: transitionDuration,
  66.       transitionBuilder: transitionBuilder,
  67.       transition: transition,
  68.       routeSettings: arguments == null
  69.           ? null
  70.           : RouteSettings(arguments: arguments),
  71.     );
  72.   }
  74.   static pop(context, [params]) {
  75.     Application.router.pop(context, params);
  76.   }
  77. }
  79. /*
  80.   * TransitionType.inFromLeft //左侧进入
  81.   * TransitionType.inFromRight //右侧进入
  82.   * TransitionType.inFromBottom //底部进入 默认入场动画
  83.   * TransitionType.native //无进入动画
  84.   * TransitionType.nativeModal //同上
  85.   * TransitionType.fadeIn //渐显动画
  86.   * TransitionType.custom //自定义
  87.   * TransitionType.material //感觉和上面几种一样 无特别动画效果
  88.   * TransitionType.materialFullScreenDialog //感觉和上面几种一样 无特别动画效果
  89.   * TransitionType.cupertino //右进右出
  90.   * TransitionType.cupertinoFullScreenDialog //底部进 底部出 下个页面返回值变化
  91. */

lib/routes/route_handles.dart 路由handler配置

最终2种传参方式（params、routeSettings）的参数，再通过 构造函数 方式 传给路由页面组件。

  1. import 'package:flutter/material.dart';
  2. import 'package:fluro/fluro.dart';
  4. import 'package:app1/pages/app_start/index.dart';
  5. import 'package:app1/pages/home/index.dart';
  6. import 'package:app1/pages/search/index.dart';
  7. import 'package:app1/pages/web_view/index.dart';
  8. import 'package:app1/pages/test/index.dart';
  10. // app-启动页
  11. var appStartHandler = Handler(
  12.   handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  13.     return AppStart();
  14.   },
  15. );
  17. // 首页（params 方式传参）
  18. var homeHandler = Handler(
  19.   handlerFunc: (context, params) {
  20.     var index = params['index']?.first;
  21.     return HomePage(index: index);
  22.   },
  23. );
  25. // 搜索页（routeSettings 方式传参示例页面）
  26. var searchHandler = Handler(
  27.   handlerFunc: (context, params) {
  28.     var args = context.settings.arguments;
  29.     return SearchPage(args);
  30.   },
  31. );
  33. // webview页面
  34. var webviewHandler = Handler(
  35.   handlerFunc: (context, params) {
  36.     var url = params['url']?.first;
  37.     var title = params['title']?.first;
  38.     var showAppBar = params['showAppBar']?.first == 'true' ? true : false;
  40.     return WebviewPage(url: url, title: title, showAppBar: showAppBar);
  41.   },
  42. );
  44. // 测试demo页面
  45. var testHandler = Handler(
  46.   handlerFunc: (context, params) {
  47.     return TestPage();
  48.   },
  49. );

lib/pages/home/index.dart 接收参数

  1. class HomePage extends StatefulWidget {
  2.   HomePage({
  3.     key,
  4.     this.index = '0',
  5.   }) : super(key: key);
  6.   final String index;
  8.   @override
  9.   _HomePageState createState() => _HomePageState();
  10. }
  11. ...

lib/routes/route_push.dart 跳转

  1. import 'package:flutter/material.dart';
  2. import 'package:app1/routes/routes.dart';
  3. import 'package:fluro/fluro.dart';
  5. class RoutePush {
  6.   // 跳转到首页指定 tab   RoutePush.home(context, index: 1);
  7.   static home(
  8.     context, {
  9.     int index = 0, //底部导航索引
  10.   }) {
  11.     Routes.navigateTo(
  12.       context,
  13.       '/home',
  14.       clearStack: true,
  15.       params: {
  16.         'index': index,
  17.       },
  18.     );
  19.   }
  21.   // 跳转到搜索页面（routeSettings方式传参示例页面） RoutePush.search(context, q: 'abc');
  22.   static search(
  23.     context, {
  24.     String q = '', //搜索文本
  25.   }) {
  26.     Routes.navigateTo(
  27.       context,
  28.       '/search',
  29.       arguments: {
  30.         'q': q,
  31.       },
  32.     );
  33.   }
  35.   // 跳转webview页面  RoutePush.webview(context, url: 'https://www.baidu.com', title: '百度');
  36.   static webview(
  37.     BuildContext context, {
  38.     @required String url, //网页链接
  39.     String title = '', //页面标题
  40.     bool showAppBar = true, //是否展示appBar
  41.   }) {
  42.     Routes.navigateTo(
  43.       context,
  44.       '/webview',
  45.       params: {'url': url, 'title': title, 'showAppBar': showAppBar},
  46.     );
  47.   }
  48. }

传参

直接通过链接传参

handler配置

  1. // webview页面
  2. var webviewHandler = Handler(
  3.   handlerFunc: (context, params) {
  4.     var url = params['url']?.first;
  5.     var title = params['title']?.first;
  6.     var showAppBar = params['showAppBar']?.first == 'true' ? true : false;
  8.     return WebviewPage(url: url, title: title, showAppBar: showAppBar);
  9.   },
  10. );

跳转

  1. Application.router.navigateTo(
  2.   context,
  3.   '/webview?url=${Uri.encodeComponent(https://www.baidu.com)}&showAppBar=true',
  4. );

接收

  1. class ApiDemoPage extends State<ApiDemoPage> {
  2.   String title;
  3.   String id;
  4.   String isShare;
  5.   ApiDemoPage({key, this.title, this.id, this.isShare}) : super(key: key);
  7.   _getData() {
  8.     print('${title} -- ${id} -- ${isShare}');    //zhu -- 11 -- null
  9.   }
  10.     //...
  11. }

通过 RouteSettings 传参

handler配置

  1. var searchHandler = Handler(
  2.   handlerFunc: (context, params) {
  3.     var args = context.settings.arguments; //args {id: 11, title: zhu}
  4.     return SearchPage(args);
  5.   },
  6. );

跳转

  1. Application.router.navigateTo(
  2.   context,
  3.   '/search',
  4.   routeSettings: RouteSettings(
  5.     arguments: {
  6.       'id': 11,
  7.       'title': 'zhu',
  8.     },
  9.   ),
  10. );

search.dart 接收

  1. class SearchPage extends StatelessWidget {
  2.   final args;
  3.   SearchPage(this.args);
  5.   @override
  6.   Widget build(BuildContext context) {
  7.     print('args $args'); //args {id: 11, title: zhu}
  8.     return null;
  9.   }
  10. }

传参Map处理

传参前转为json字符串，接收时，再解码。

Application.router.pop() 返回

  1. /// 返回上一个页面
  2. static pop() {
  3.   // 全局 context
  4.   BuildContext myContext = navigatorKey.currentState.overlay.context;
  5.   router.pop(myContext);
  6. }
  8. //这里设置了一个全局 context，如果没有设置，直接把 context 传入就行了。
  9. Application.router.pop(context);
  10. Application.router.pop(context, 1);

取得全局 Context

https://www.yuque.com/zhuchaoyang/tnyvrp/iisqnz/