安装fluro插件

  • fluro的文档地址为：fluro
  • 在pubspec.yaml文件中添加dependencies，如下：
    1
    2
    dependencies:
     fluro: "^1.5.1"
  • package get下载对应的依赖插件

搭建项目结构，全局配置

  • 在lib目录下新建router文目录，目录结构如下：
    –lib
    —-router
    ——–application.dart
    ——–router_handler.dart
    ——–routers.dart
  • 配置入口文件，application.dart中就只有一个静态属性，保存一个全局公用（static）的Router对象，application.dart文件内容如下：
    1
    2
    3
    4
    5
    import 'package:fluro/fluro.dart';  
      
    class Application {  
      static Router router;  
    }
  • 在入口文件main.dart中的主方法（main）中实例化一个公用的Router对象，存在application中，用的时候也是从apllication.dart中拿，然后配置router，main方法中关键代码如下：
    1
    2
    3
    final router = Router();  
    Routes.configureRoutes(router);  
    Application.router = router;
  • 注入顶层的MaterialApp中，如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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对象
    1
    2
    3
    4
    5
    import 'package:fluro/fluro.dart';  
      
    class Application {  
      static Router router;  
    }
  • routers.dart文件，用于配置fluro插件中的Router对象，把所有对应的路由名称和页面配置在这个文件里面
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    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都返回对应的页面，并处理传入相应的路由参数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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进行页面跳转

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