Flutter路由项目实战之fluro

github: https://github.com/zhengzhuan...

关于flutter路由,在小项目中,就按照原生写法,但是在大型项目中,这样的我就不会进行推荐,我这里使用的fluro路由管理方案,大型项目中非常nice,现在开始啥也不说了,看我操作就行了

fluro: ^1.5.1

注:自认为是Flutter最亮,最时髦,最酷的路由器。

在大型项目中,你要问我什么叫大型,我感觉超过20就算了吧,具体什么叫大型,我也不知道,哈哈哈

首先呢,在项目中新建一个routers文件夹,与main.dart同级,这个文件夹就是我们的路由文件夹,建好之后,我们开始进行创建路由

1:新建application.dart

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

2:新建routes.dart

这个页面就配置我们的路由调转链接模块

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

class Routes {
    static String root = '/';
    static String indexPage = '/indexPage';
    static String normalPage = '/normalPage';
    static String routingReference = '/routingReference';
    static String login = '/login';
    static void configureRoutes(Router router) {
        router.notFoundHandler = new Handler(
            handlerFunc: (BuildContext context, Map<String, List<String>> params) {
                print('ERROR====>ROUTE WAS NOT FONUND!!!'); // 找不到路由,跳转404页面
                print('找不到路由,404');
            },
        );

        // 路由页面配置
        router.define(indexPage, handler: indexPageHanderl);
        router.define(normalPage, handler: normalPageHanderl);
        router.define(routingReference, handler: routingReferenceHanderl);
        router.define(login, handler: loginHanderl);
    }
}

3:新建router_handler.dart

handler就是每个路由的规则,编写handler就是配置路由规则,比如我们要传递参数,参数的值是什么,这些都需要在Handler中完成。

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter_fluro/pages/index_page.dart';
import 'package:flutter_fluro/pages/login.dart';
import 'package:flutter_fluro/pages/normal_page.dart';
import 'package:flutter_fluro/pages/routing_reference.dart';
// 首页
Handler indexPageHanderl = Handler(  
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {    
        return IndexPage();  
    },
);

// 正常路由跳转
Handler normalPageHanderl = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
        return NormalPage();
    }
);

// 路由传参
Handler routingReferenceHanderl = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
        String id = params['id'].first;
        return RoutingReference(id: id);
    }
);

// 登陆页面
Handler loginHanderl = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
        return Login();
    }
);

4:新建navigator_util.dart

这个里面主要是进行路由跳转方法的公共书写

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:maitianshanglv_driver/pages/app_common_module/login.dart';
import 'package:maitianshanglv_driver/pages/index_page.dart';
import './application.dart';
import './routes.dart';

class NavigatorUtil {  
    // 返回  
    static void goBack(BuildContext context) {    
        /// 其实这边调用的是 
        Navigator.pop(context);    
        Application.router.pop(context);  
    }
    
    // 带参数的返回
    static void goBackWithParams(BuildContext context, result) {
        Navigator.pop(context, result);
    }

    // 路由返回指定页面
    static void goBackUrl(BuildContext context, String title) {
        Navigator.popAndPushNamed(context, title);
    }

    // 跳转到主页面
    static void goHomePage(BuildContext context) {
        Application.router.navigateTo(context, Routes.homePage, replace: true);
    }
    
    /// 跳转到 转场动画 页面 , 这边只展示 inFromLeft ,剩下的自己去尝试下,
    /// 框架自带的有 native,nativeModal,inFromLeft,inFromRight,inFromBottom,fadeIn,custom
    static Future jump(BuildContext context, String title) {
        return Application.router.navigateTo(context, title, transition: TransitionType.inFromRight);
        /// 指定了 转场动画
    }

    /// 框架自带的有 native,nativeModal,inFromLeft,inFromRight,inFromBottom,fadeIn,custom
    static Future jumpLeft(BuildContext context, String title) {        return Application.router.navigateTo(context, title, transition: TransitionType.inFromLeft);        /// 指定了 转场动画    }    
    static Future jumpRemove(BuildContext context) {        return Navigator.of(context).pushAndRemoveUntil(            MaterialPageRoute(                builder: (context) => IndexPage(),            ),
            (route) => route == null);    }
    
    /// 自定义 转场动画
    static Future gotransitionCustomDemoPage(BuildContext context, String title) {
        var transition = (BuildContext context, Animation<double> animation,
            Animation<double> secondaryAnimation, Widget child) {
            return new ScaleTransition(
                scale: animation,
                child: new RotationTransition(
                    turns: animation,
                    child: child,
                ),
        };
        return Application.router.navigateTo(context, title, 
                transition: TransitionType.custom,
        /// 指定是自定义动画
        transitionBuilder: transition,

        /// 自定义的动画
        transitionDuration: const Duration(milliseconds: 600));
        /// 时间
    }

    /// 使用 IOS 的 Cupertino 的转场动画,这个是修改了源码的 转场动画
    /// Fluro本身不带,但是 Flutter自带
    static Future gotransitionCupertinoDemoPage(
        BuildContext context, String title) {
        return Application.router.navigateTo(context, title, transition: TransitionType.cupertino);
    }

    // 跳转到主页面IndexPage并删除当前路由
    static void goToHomeRemovePage(BuildContext context) {
        Navigator.of(context).pushAndRemoveUntil(
            MaterialPageRoute(
                builder: (context) => IndexPage(),
        ), (route) => route == null);
    }

    // 跳转到登录页并删除当前路由
    static void goToLoginRemovePage(BuildContext context) {
        Navigator.of(context).pushAndRemoveUntil(
            MaterialPageRoute(
                builder: (context) => Login(),
            ), (route) => route == null);
    }
}

5:接下来基本上路由模块建立完成

需要到main.dart文件夹进行注册一下

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_fluro/pages/index_page.dart';
import 'package:flutter_fluro/routers/application.dart';
import 'package:flutter_fluro/routers/routes.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //-----------------路由主要代码start
    final router = Router();
    Routes.configureRoutes(router);
    Application.router = router;
    //-----------------路由主要代码end

    return Container(
      child: MaterialApp(
        title: 'fluro',
        //-----------------路由主要代码start
        onGenerateRoute: Application.router.generator,
        //-----------------路由主要代码end
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          brightness: Brightness.light,
          primaryColor: Color.fromARGB(255, 78, 79, 95),
        ),
        home: IndexPage(),
      ),
    );
  }
}

大功告成,到这里关于flutter采用fluro方式进行的大型项目路由管理就算成功,

使用方法:

NavigatorUtil.jump(context, '/normalPage');
NavigatorUtil.jump(context, '/routingReference?id=200');
NavigatorUtil.goToLoginRemovePage(context);

注意:中文传参问题

NavigatorUtil.jump(context, '/routingReference?id=${Uri.encodeComponent("中文参数")}');
Image placeholder
pena
未设置
  12人点赞

没有讨论,发表一下自己的看法吧

推荐文章
基于JS的高性能Flutter动态化框架MXFlutter

导语:18年10月份,手机QQ看点团队尝试使用Flutter,做为iOS开发,一接触到Flutter就马上感受到,Flutter虽然强大,但不能像RN一样动态化是阻碍我们使用她的唯一障碍了。看Goog

DBA职业发展之路:去“IOE”等挑战之下,DBA将何去何从?

开篇随着近些年来,开源、自动化、云化的兴起,DBA职业也正悄然发生一些变化。经常有朋友咨询我,职业发展规划;特别是近期Oracle的大幅裁员之后,针对DBA这一职业未来该如何发展?本文是个人对此问题的

跨平台开发的救星-让我们来了解一下flutter

第一次看文章的朋友可以关注我,会不定期发布Android面试内容、进阶专题等等。简介很多人已经用上了flutter,今天就来介绍一下Flutter架构Flutter框架分三层 Framework,En

Flutter高内聚组件怎么做?闲鱼打造开源高效方案!

fish_redux是闲鱼技术团队打造的开源flutter应用开发框架,旨在解决页面内组件间的高内聚、低耦合问题。开源地址:https://github.com/alibaba/fish-redux从

揭秘!一个高准确率的Flutter埋点框架如何设计

背景用户行为埋点是用来记录用户在操作时的一系列行为,也是业务做判断的核心数据依据,如果缺失或者不准确将会给业务带来不可恢复的损失。闲鱼将业务代码从Native迁移到Flutter上过程中,发现原先Na

走近科学,探究阿里闲鱼团队通过数据提升Flutter体验的真相

背景闲鱼客户端的Flutter页面已经服务上亿级用户,因此用户体验尤其重要,完善Flutter性能稳定性监控体系,以便及早发现线上性能问题,也可以作为用户体验提升的衡量标准。那么Flutter的性能到

重磅|庖丁解牛之——Flutter for Web

Flutterfor Web在2018年冬的Flutter1.0伦敦发布会上,Flutter产品经理TimSneath通过一个滑动拼图的例子介绍了如何让Flutter运行在Web之上。这一当时代号Hu

闲鱼Flutter互动引擎系列——整体设计篇

什么是Candy引擎Candy引擎是闲鱼技术团队设计开发的一款:APP嵌入式的、轻量级的、易于开发、性能稳定的互动引擎;绘制系统高度融合Flutter体系,游戏场景和FlutterUI支持无缝混排;动

Flutter环境搭建记录

1.下载安装包之后执行flutterdoctor报错:zsh:commandnotfound:flutter下载的是源码,去这里下载SDK 2.执行flutterdoctor,按照提示升级xcode、

入门 | Tensorflow实战讲解神经网络搭建详细过程

作者| AI小昕编辑| 磐石出品| 磐创AI技术团队【磐创AI导读】:本文详细介绍了神经网络在实战过程中的构建与调节方式。之前我们讲了神经网络的起源、单层神经网络、多层神经网络的搭建过程、搭建时要注意

TensorFlow 2.0 代码实战专栏开篇

作者|  AymericDamien编辑 | 奇予纪出品| 磐创AI团队原项目|  https://github.com/aymericdamien/TensorFlow-Examples/ 写在前面

最适合入门的Python数据分析实战项目

微信公众号:「Python读财」如有问题或建议,请公众号留言伴随着移动互联网的飞速发展,越来越多用户被互联网连接在一起,用户所积累下来的数据越来越多,市场对数据方面人才的需求也越来越大,由此也带火了如

gMIS吉密斯十年执念:Lower Costs较低成本Better Productivity较高效率

Hello2020!元旦快乐!今起揭开21世纪20年代的篇章.1.gMIS吉密斯十周年2010-2020,十年转眼已成历史,gMIS吉密斯——通用管理信息系统(generalManagementInf

Twitter 宣布抛弃 Mesos,全面转向 Kubernetes

作者|阿里云智能高级技术专家张磊划重点Twitter的基础设施从Mesos全面转向Kubernetes阿里云容器平台团队即将开源 Kubernetes高级作业管理集合美国西部时间5月2日下午7点,Tw

TensorFlow技术主管Peter Wardan:机器学习的未来是小而美

大数据文摘授权转载自OReillyAIPeteWardan任谷歌TensorFlow移动和嵌入式团队的leader,在O’ReillyAIConference2019的Keynote演讲环节,他对机器

Stack Overflow 上最火的一个问题:什么是 NullPointerException

在逛StackOverflow的时候,发现最火的问题竟然是:什么是NullPointerException(java.lang.NullPointerException),它是由什么原因导致的,有没有

如何使网站支持https访问?nginx配置https证书

购买SSL证书要想使用https访问你的网址,首先得拥有颁发的SSL证书。我这里申请的是阿里云免费的,有效期为一年,过期后再重新申请。申请SSL证书购买后,可在阿里云的搜索框输入证书关键字进入到控制台

jQuery blur()怎么用?

jQueryblur()怎么用?当元素失去焦点时触发blur事件。blur()函数触发blur事件,或者如果设置了function参数,该函数也可规定当发生blur事件时执行的代码。语法$(selec

sharding sphere 4.0.0-RC1版本 按年分表实战

1.shardingsphere4.0.0-RC1版本按年分表实战1.1.需求需要对日志表进行按时间划分表,由于用于后台系统,日志量预估不会太大,因此按年划分表经过我不断的查阅shardingsphe

influxDB集群模式实践

influxDB数据库以其优秀的时序数据存储和查询能力,在处理和分析类似资源监控等时序数据方面得到了广泛的应用。而influxDB自带的各种特殊函数如求平均值、标准差、随机取数据,使数据分析变得十分方

Spring Boot 中的响应式编程和 WebFlux 入门

Spring5.0中发布了重量级组件Webflux,拉起了响应式编程的规模使用序幕。WebFlux使用的场景是异步非阻塞的,使用Webflux作为系统解决方案,在大多数场景下可以提高系统吞吐量。Spr

怎么安装react-router

怎么安装react-router安装命令:npminstallreact-routerreact-router路由提供了一些router的核心api,包括Router,Route,Switch等,但是

最新 React Router 全面整理

Reactrouter已经到了V5版本,增加了基于ReactHooks的一些API,比如useParams、useHistory等等,让我们可以在组件中不接受routeprops就可以拿到路由信息{m

jQuery中attr()和prop()的区别?

attr():attr()方法设置或返回被选元素的属性和值。当该方法用于返回属性值,则返回第一个匹配元素的值。当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。prop():prop()方

jquery中prop()和attr()之间有什么区别?

1、操作对象不同很明显,attr和prop分别是单词attribute和property的缩写,并且它们均表示"属性"的意思。不过,在jQuery中,attribute和property却是两个不同的