Flutter路由fluro引入配置和使用的具体方法
Flutter本身提供了路由机制,作个人的小型项目,完全足够了。但是如果你要作企业级开发,可能就会把入口文件变得臃肿不堪。而再Flutter问世之初,就已经了企业级路由方案fluro。
flutter_fluro简介
fluro简化了Flutter的路由开发,也是目前Flutter生态中最成熟的路由框架。
GitHub地址:https://github.com/theyakka/fluro
它出现的比较早啊,是目前用户最多的Flutter路由解决方案,目前Github上有将近1000Star,可以说是相当了不起了。
引入fluro
在pubspec.yaml文件里,直接注册版本依赖,代码如下。(注意要最新版)
dependencies: fluro: "^1.5.1"
如果你这个版本下载不下来,你也可以使用git的方式注册依赖,这样页是可以下载包的(这也是小伙伴提的一个问题),代码如下:
dependencies: fluro: git: git://github.com/theyakka/fluro.git
在项目的入口文件,也就是main.dart中引入,代码如下:
import 'package:fluro/fluro.dart';
通过上面的三步,就算把Fluro引入到项目中了,下面就可以开心的使用了。
初始化Fluro
现在可以进行使用了,使用时需要先在Build方法里进行初始化,其实就是把对象new出来。
final router = Router();
编写rotuer_handler
handler相当于一个路由的规则,比如我们要到详细页面,这时候就需要传递商品的ID,那就要写一个handler。这次我按照大型企业级真实项目开发来部署项目目录和文件,把路由全部分开,Handler单独写成一个文件。新建一个routers文件夹,然后新建router_handler.dart文件
import 'package:flutter/material.dart'; import 'package:fluro/fluro.dart'; import '../pages/details_page.dart'; Handler detailsHanderl =Handler( handlerFunc: (BuildContext context,Map<String,List<String>> params){ String goodsId = params['id'].first; print('index>details goodsID is ${goodsId}'); return DetailsPage(goodsId); } );
这样一个Handler就写完了。Hanlder的编写是路由中最重要的一个环境,知识点也是比较多的,这里我们学的只是最简单的一个Handler编写,以后会随着课程的增加,我们会再继续深入讲解Handler的编写方法。
Hanlder只是对每个路由的独立配置文件,fluro当然还需要一个总体配置文件。配置好后,我们还需要一个静态化文件,方便我们在UI页面进行使用。
配置路由
我们还需要对路由有一个总体的配置,比如跟目录,出现不存在的路径如何显示,工作中我们经常把这个文件单独写一个文件。在routes.dart里,新建一个routes.dart文件。
代码如下:
import 'package:flutter/material.dart'; import 'package:fluro/fluro.dart'; import './router_handler.dart'; class Routes { //配置类 static String root = '/'; //根目录 static String detailsPage = '/detail'; //详情页面 //静态方法 static void configureRoutes(Router router){//路由配置 //找不到路由 router.notFoundHandler = new Handler( handlerFunc: (BuildContext context,Map<String,List<String>> params){ print('ERROR====>ROUTE WAS NOT FONUND!!!'); } ); //整体配置 router.define(detailsPage, handler: detailsHandler); } }
把Fluro的Router静态化
这一步就是为了使用方便,直接把Router进行静态化,这样在任何一个页面都可以直接调用,不用再New 去调用了。
在routers下面新建了application.dart文件。代码如下:
import 'package:fluro/fluro.dart'; class Application{ static Router router; }
静态化Router,这样我们在使用的时候就可以直接用 Application.Router就可以了。
现在我们基本就把Fluro的路由配置好了,这样的配置虽然稍显复杂,但是跟层次和条理化,扩展性也很强。
把路由注册/注入到顶层
打开main.dart文件,首页引入配置文件和静态化文件,routes.dart和application.dart,代码如下:
import './routers/routes.dart'; import './routers/application.dart';
引入后需要进行赋值,进行注入程序。这里展示主要build代码。
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:'百姓生活+', debugShowCheckedModeBanner: false, //----------------主要代码start onGenerateRoute: Application.router.generator, //路由静态化 //----------------主要代码end theme: ThemeData( primaryColor:Colors.pink, ), home:IndexPage() ), ); } }
上面代码就是注入整个程序,让我们在任何页面直接引入application.dart就可以使用。
在首页使用
现在要在首页里使用路由,直接在首页打开商品详细页面。
先引入application.dart文件:
import './routers/application.dart';
然后再火爆专区的列表中使用配置好的路由,打开商品详细页面details_page.dart。
打开home_page.dart文件,找到火爆专区列表里的ontap事件,然后在ontap事件中直接使用application进行跳转,代码如下:
Application.router.navigateTo(context,"/detail?id=${val['goodsId']}");
这时候可以测试一下,如果一切正常,应该可以打开商品详细页面了。
总结:
单独写一个Handler文件,每个Handler都写在里面,每个路由单独定义,然后进行跳转页面都是在Handler里做的。如果有10个页面,把10个页面的Handler都做完了,要到routes.dart文件里去进行总体配置define,再进行静态化,然后在主main.dart文件里注入,最后就可以使用了。
每添加一个路由,router文件和Handler文件都要进行配置。
到此这篇关于Flutter路由fluro引入配置和使用的具体方法的文章就介绍到这了,更多相关Flutter fluro配置使用内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
Flutter悬浮按钮FloatingActionButton使用详解
本文主要介绍了Flutter悬浮按钮FloatingActionButton使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-07-12- 登录页面在 App 开发中非常常见,本篇借登录页面的开发介绍了文本框 TextField组件的使用,同时使用文本框的装饰属性实现了个性化文本框设置。...2021-06-05
Flutter 底部弹窗ModelBottomSheet的使用示例
在实际开发过程中,经常会用到底部弹窗来进行快捷操作,例如选择一个选项,选择下一步操作等等。在 Flutter 中提供了一个 showModelBottomSheet 方法用于弹出底部弹窗,本篇介绍如何使用底部弹窗。...2021-06-07- 在实际开发过程中,往往开始是完成功能层面的开发,然而再考虑组件封装和代码优化。当然,组件封装越早做越好,因为这样会提高整个团队开发的规范性和效率。本文将介绍如何封装一个文本输入框组件...2021-06-05
- 这篇文章主要介绍了Flutter项目在 iOS14 启动崩溃的解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-24
- 这篇文章主要介绍了flutter实现点击事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-26
- Flutter是Google推出的基于Dart语言开发的跨平台开源UI框架,旨在统一纷纷扰扰的跨平台开发框架,在UI层面上多端共用一套Dart代码来实现多平台适配开发,这篇文章主要介绍了flutter的环境安装配置问题,需要的朋友可以参考下...2020-06-09
详解Flutter 调用 Android Native 的方法
这篇文章主要介绍了详解Flutter 调用 Android Native 的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-25- 在实际开发中,我们经常会需要在页面跳转的时候携带路由参数,典型的例子就是从列表到详情页的时候,需要携带详情的 id,以便详情页获取对应的数据。同时,有些时候还需要返回时携带参数返回上一级,以便上级页面根据返回结果更新。本篇将介绍这两种情形的实现。...2021-06-18
用Flutter做桌上弹球(绘图(Canvas&CustomPaint)API)
这篇文章主要介绍了用Flutter做桌上弹球 聊聊绘图(Canvas&CustomPaint)API,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-31- 任何一个app基本都会设计一个启动页,今天我们就来看看怎么在flutter项目中设置启动页,这篇文章主要给大家介绍了关于Flutter Android应用启动白屏解决的相关资料,需要的朋友可以参考下...2021-11-11
- 这篇文章主要为大家详细介绍了Flutter实现局部刷新,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-14
- Flutter本身提供了路由机制,本文主要介绍了Flutter fluro配置使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-08
Canonical通过Flutter启用Linux桌面应用程序(推荐)
这篇文章主要介绍了Canonical通过Flutter启用Linux桌面应用程序,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-10- 通常Flutter与Android页面交互是各自独占整个手机屏幕,但有些情况下无法满足需求,有些时候Flutter中没有提供相关插件或者插件不满足需求,这时候就需要开发者自定义插件,开发者可以参考本文中的方法去进行自定义。...2021-06-07
- 这篇文章主要介绍了Flutter中如何使用WillPopScope,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-14
- 这篇文章主要介绍了Flutter深色模式适配的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-04
- 这篇文章主要介绍了Android如何在原生App中嵌入Flutter,帮助大家更好的理解和学习Android开发,感兴趣的朋友可以了解下...2021-03-13
- 这篇文章主要介绍了Flutter仿钉钉考勤日历的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 大家应该都知道目前Flutter官方是没有自定义键盘的解决方案,下面这篇文章主要给大家介绍了关于Flutter软键盘原理的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-10-08