flutter 路由管理

安装fluro插件

• fluro的文档地址为：fluro
• 在pubspec.yaml文件中添加dependencies，如下：

dependencies:
 fluro: "^1.5.1"

• package get下载对应的依赖插件

搭建项目结构，全局配置

• 在lib目录下新建router文目录，目录结构如下：
  --lib
  ----router
  --------application.dart
  --------router_handler.dart
  --------routers.dart
• 配置入口文件，application.dart中就只有一个静态属性，保存一个全局公用（static）的Router对象，application.dart文件内容如下：

import 'package:fluro/fluro.dart';  
  
class Application {  
  static Router router;  
}

• 在入口文件main.dart中的主方法（main）中实例化一个公用的Router对象，存在application中，用的时候也是从apllication.dart中拿，然后配置router，main方法中关键代码如下：

final router = Router();  
Routes.configureRoutes(router);  
Application.router = router;

• 注入顶层的MaterialApp中，如下：

class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Container(  
      child: MaterialApp(  
        title: '这是title',  
        // 关键代码开始
        onGenerateRoute: Application.router.generator,
        // 关键代码结束
        debugShowCheckedModeBanner: false,  
        theme: ThemeData(primaryColor: Colors.pink),  
        home: IndexPage(),  
      ),  
    );  
  }  
}

编写router结构文件关键代码

• application.dart文件,用于存取全局公用的Router对象

import 'package:fluro/fluro.dart';  
  
class Application {  
  static Router router;  
}

• routers.dart文件，用于配置fluro插件中的Router对象，把所有对应的路由名称和页面配置在这个文件里面

import 'package:fluro/fluro.dart';  
import 'package:flutter/cupertino.dart';  
import 'package:flutter_shop/router/router_handler.dart';  
  
class Routes {  
  static String root = '/';  
  static String detailsPage = 'details';  // 自定义详情页面路由名称为details
  static String jpushPage = 'jpush';  // 自定义极光推送页面路由名称为jpush
    
  static void configureRoutes(Router router) {  // 路由配置，用define函数将路由和页面对应
    router.notFoundHandler = new Handler(  // 页面不存在的时候处理函数
      handlerFunc: (BuildContext context,Map<String,List<String>> params) {  
        print('ROUTER IS NOT FOUND!');  
      }  
    );  
    router.define(detailsPage, handler: detailsHandler);  
    router.define(jpushPage, handler: jpushHandler);  
    // 如果有其他页面，继续写router.define(xxx, handler: xxx);
  }  
}

• router_handler.dart文件，对应的每个handler都返回对应的页面，并处理传入相应的路由参数

import 'package:fluro/fluro.dart';  
import 'package:flutter/cupertino.dart';  
import 'package:flutter_shop/pages/details_page.dart';  
import 'package:flutter_shop/pages/jpush_page.dart';  
  
// 详情页面handler，返回对应页面，并且处理url携带过来的参数id，实例化对象的时候传入，在页面初始话的时候能拿到这个id
Handler detailsHandler = new Handler(handlerFunc: (BuildContext context,Map<String,List<String>> params){  
  String goodsId = params['id'].first;  
  return DetailsPage(goodsId);  
});  
  
// jpush(极光推送页面hanler)，返回对应页面，并且没有参数需要处理
Handler jpushHandler = new Handler(handlerFunc: (BuildContext context,Map<String,List<String>> params){  
  return JPushPage();  
});

调用navigateTo进行页面跳转

InkWell(  
  onTap: (){  
    // 使用全局的Router对象，调用navigateTo进行跳转，details为在routers.dart中定义的属性值，前面加上'/'，如果携带参数，后面接上'?参数名=值'
    Application.router.navigateTo(context, '/details?id=123');  
  },  
  child: xxx
)