Flutter Fluro路由管理的极简封装

Fluro是Flutter路由跳转管理的很好框架，下面我们一起来对他进行封装使用～ lets go

1.在pubspec.yaml文件的dependencies:中添加 fluro: ^1.6.3

2.建立路由路径和页面的Map 映射表：～搞起来

 class DDRoutes {

    static Router router;

    static String root = '/'; // 根目录
    static String oder_page = '/oder_page'; // 我的订单页面
    static String my_product_page = '/my_product_page'; // 我的商品页面
    static String address_list_page = '/address_list_page'; // 我的商品页面
    static String add_address_page = '/add_address_page'; // 添加收货地址的页面


     // 配置route
    static void configureRoutes(Router router) {
    // 未发现对应route
    router.notFoundHandler = Handler(handlerFunc: (BuildContext    context, Map<String, dynamic> params) {
      print('route not found!');
      return;
    });

   router.define(root, handler: rootHandler); // 根目录
   router.define(oder_page, handler: oder_page_handler); // 我的订单
   router.define(my_product_page, handler: my_product_page_handler); //我的商品
   router.define(address_list_page, handler: address_list_page_handler); // 我的地址列表
   router.define(add_address_page, handler: add_address_page_handler); // 添加收货地址的页面

  }

  // 对参数进行encode，解决参数中有特殊字符，影响fluro路由匹配
  static Future navigateTo(BuildContext context, String path, {Map<String, dynamic> params, TransitionType transition = TransitionType.native}) {
String query =  "";
if (params != null) {
  int index = 0;
  for (var key in params.keys) {
    var value = Uri.encodeComponent(params[key]);
    if (index == 0) {
      query = "?";
    } else {
      query = query + "\&";
    }
    query += "$key=$value";
    index++;

  }
}
print('我是navigateTo传递的参数：$query');

path = path + query;
return router.navigateTo(context, path, transition:transition);
  }


}

3.建立页面对应的处理handler类 代码搞里头

    // 根目录
    Handler rootHandler =
     Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    return DDHomePage();
   });

  //我的订单
   Handler oder_page_handler = Handler(

   handlerFunc: (BuildContext context, Map<String,dynamic> params ){

String select_index = params['select_index']?.first;
return DDOderPage(select_index);

  }

  );


   //我的商品
   Handler my_product_page_handler = Handler(

handlerFunc: (BuildContext context, Map<String,dynamic> params ){

  String select_index = params['select_index']?.first;
  return DDMyProductPage(select_index);

}

  );

    //地址列表
   Handler address_list_page_handler = Handler(

handlerFunc: (BuildContext context, Map<String,dynamic> params ){
  return DDAdressListPage();
}

 );


   //地址列表
   Handler add_address_page_handler = Handler(

handlerFunc: (BuildContext context, Map<String,dynamic> params ){
  String title = params['title']?.first;
  return DDAddAddresssPage(title);
}

);

4.在项目入口调用Map映射的配置 ～代码搞里头

    Widget build(BuildContext context) {
    // TODO: implement build
   return MaterialApp(
  title: "VIP",
  home: DDHomePage(),
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    primaryColor: Colors.white,
    highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
    splashColor: Colors.white10,
  ),
  onGenerateRoute: DDRoutes.router.generator, // 配置route generate
);

}

5.页面跳转的时候的使用 代码搞里头

.不带参数的使用

    DDRoutes.navigateTo(context,
            DDRoutes.address_list_page,

        );
        

.带参数的使用

    DDRoutes.navigateTo(context,
            DDRoutes.my_product_page,
            params: {
              "select_index" : data.select_index
            }

        );