flutter企业级路由插件Fluro

查看Fluro最新版本

添加依赖

#路由跳转
 fluro:  ^1.5.1

新建相关文件

1pages文件夹同级新建routers/router_handler.dart文件,用于初始化跳转到各个页面的handle,并获取到上个页面传递过来的值,然后在初始化要跳转到的页面.

代码如下

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
//引入商品详情页面
import '../pages/detaisPage.dart';

// 监测详情页面路由传值
var DetaisHandler = new Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
     String  goodsId=params["id"].first; //接受路由传的id
     print("index>detailpage>goodsid=${goodsId}");//字面量
     return DetaisPage(goodsId);
});

2.建立一个routers/routes.dart文件 用于包含所有需要路由跳转的handler

代码如下

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import './router_handler.dart';

class Routes{
   
   static  String root="/";
   static  String detailPage='/detail';//①处

  static void configureRoutes(Router router){
    // 检测如果没有匹配到路由
    router.notFoundHandler = new Handler(
        handlerFunc: (BuildContext context,Map<String,List<String>> params){
      print("route is not find !");
    });

    // 1.detailPage取值①处的变量
    // 2.DetaisHandler取值于router_handler.dart 
    router.define(detailPage, handler: DetaisHandler);  
    
  }
}

3.为了使用更方便我们需要把routes.dart的类静态化 使用的时候会方便很多直接调用该文件就可以了。

新建一个routes/application.dart文件 下面贴出核心代码

import 'package:fluro/fluro.dart';

class Application{
  static Router router;  //静态化 使用的时候不用再new了
}

4.顶级文件main.dart进行注册

// 第一部分  加载路由的三个文件
import 'package:fluro/fluro.dart';
import './routers/application.dart';
import './routers/routes.dart';



class MyApp extends StatelessWidget {
 
   MyApp(){
   
    //第二部分  顶级注册路由初始化路由 
    final router = new Router();
    Routes.configureRoutes(router);
    Application.router = router;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child:MaterialApp(
             title:'FlutterDemo+' ,
             onGenerateRoute: Application.router.generator, //第三部分 自定义路由
             debugShowCheckedModeBanner: false,
             theme: ThemeData(
               primaryColor: Colors.pink
             ),
             home: IndexPage()

      ),
    );
  }
}

5.路由的框架搭建完毕 下面来使用吧。

 onTap: (){
           // 跳转页面并进行传值
           Application.router.navigateTo(context, "/detail?id=${newList[index].goodsId}");

           },

6.打完收工 （本人是小白一枚 欢迎一起交流）