flutter 专题 八十二 Flutter路由框架Fluro简介

在Flutter应用开发过程中,除了使用Flutter官方提供的路由外,还可以使用一些第三方路由框架来实现页面管理和导航,如Fluro、Frouter等。
Fluro作为一款优秀的Flutter企业级路由框架,Fluro的使用比官方提供的路由框架要复杂一些,但是却非常适合中大型项目。因为它具有层次分明、条理化、方便扩展和便于整体管理路由等优点。
使用Fluro之前需要先在pubspec.yaml文件中添加Fluro依赖,如下所示。

dependencies:
 fluro: "^1.5.1"

如果无法使用上面的方式添加Fluro依赖,还可以使用git的方式添加Fluro依赖,如下所示。

dependencies:
 fluro:
   git: git://github.com/theyakka/fluro.git

成功添加Fluro库依赖后,就可以使用Fluro进行应用的路由管理与导航开发了。为了方便对路由进行统一的管理,首先需要新建一个路由映射文件,用来对每个路由进行管理。如下所示,是路由配置文件route_handles.dart的示例代码。

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/page_a.dart';
import 'package:flutter_demo/page_b.dart';
import 'package:flutter_demo/page_empty.dart';

//空页面
var emptyHandler = new Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
      return PageEmpty();
    });

//A页面
var aHandler = new Handler(
    handlerFunc: (BuildContext context, Map<String, List<Object>> params) {
      return PageA();
    });

//B页面
var bHandler = new Handler(
    handlerFunc: (BuildContext context, Map<String, List<Object>> params) {
      return PageB();
    });

完成基本的路由配置后,还需要一个静态的路由总体配置文件,方便我们在路由页面中使用。如下所示,是路由总体配置文件routes.dart的示例代码。

import 'package:fluro/fluro.dart';
import 'package:flutter_demo/route_handles.dart';

class Routes {
  static String page_a = "/";                   //需要注意
  static String page_b = "/b";

  static void configureRoutes(Router router) {
    router.define(page_a, handler: aHandler);
    router.define(page_b, handler: bHandler);
    router.notFoundHandler =emptyHandler;     //空页面
  }
}

在进行路由的总体配置时,还需要处理不存在的路径情况,即使用空页面或者默认页面进行代替。同时,需要注意的是应用的首页一定要用“/”进行配置。
为了方便使用,还需要把Router进行静态化,这样在任何一个页面都可以直接调用它。如下所示,是application.dart文件的示例代码。

import 'package:fluro/fluro.dart';

class Application{
  static Router router;
}

完成上述操作后,就可以在main.dart文件中引入路由配置文件和静态化文件了,如下所示。

import 'package:fluro/fluro.dart';
import 'package:flutter_demo/routes.dart';

import 'application.dart';

void main() {
  Router router = Router();
  Routes.configureRoutes(router);
  Application.router = router;

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo App',
      onGenerateRoute: Application.router.generator,
    );
  }
}

如果要在跳转到某个页面,只需要使用Application.router.navigateTo()方法即可,如下所示。

Application.router.navigateTo(context,"/b");   //b为配置路由

运行上面的示例代码,效果如下图所示。

可以发现,Fluro虽然使用上相比Flutter的Navigator要繁琐,但是对于中大型项目却非常适合,它的分层架构也非常方便项目后期的升级和维护,使用时可以根据实际情况进行合理的选择。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/978050.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

(十)趣学设计模式 之 外观模式!

目录 一、 啥是外观模式&#xff1f;二、 为什么要用外观模式&#xff1f;三、 外观模式的实现方式四、 外观模式的优缺点五、 外观模式的应用场景六、 总结 &#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&#xff0c;如果喜欢博主的讲解方式&#xff0c;可以多多支…

为AI聊天工具添加一个知识系统 之124 详细设计之65 人类文化和习俗,即文化上的差异-根本差异 之2

本文要点 要点 “取” 本身 是一个具有 主谓宾 三格的 多“格”词。 三“格”&#xff08;主/谓/宾&#xff09;分别是&#xff1a; 主取&#xff0c;取法&#xff08;能取&#xff1a;两组分别 是 析取取“异”&#xff08;三个“不同”&#xff09;和合取取“同”&#xf…

AXI协议详解及FPGA仿真

AXI协议详解及FPGA仿真 1 摘要 AMBA AXI 协议是以高性能&#xff0c;高频系统设计为目标&#xff0c;提供了很多适合高速亚微型系统互连的特征。为相邻存储器连续进行数据传输提供的一种高频率&#xff0c;高带宽&#xff0c;低延迟的总线协议&#xff0c;是一种突发传输协议…

互联网怎样利用人性-思维导图-markdown

互联网怎样利用人性 傲慢 留言、点评饥饿营销、吵架营销 懒惰 一键下单、扫二维码默认登录、多平台同步单点登录SSO美女论坛、美女头像事业线开箱防御力破女性装饰 贪婪 团购、秒杀、抽奖免费试吃、下载存储空间、在家赚钱晒单返现 窥视 订阅、悄悄关注名人博客微博、惊人标题…

javascript-es6 (五)

内置构造函数 在 JavaScript 中 最主要 的数据类型有 6 种&#xff1a; 基本数据类型&#xff1a; 字符串、数值、布尔、undefined、null 引用类型: 对象 但是&#xff0c;我们会发现有些特殊情况&#xff1a; //普通字符串 const str peiqi console.log(str.length) //…

Hive从入门到运用

hive简介 hive的设计思想&#xff08;本质是一个翻译器&#xff09; 上传安装包 解压&#xff0c;查看 运行hive&#xff08;一定要启动hadoop&#xff0c;是有依赖关系的。&#xff09; 测试启动方法&#xff0c;和建表 文件创建很上传到hdfs&#xff0c;直接上传到hive表的目…

RK3588部署YOLOv8(1):YOLOv8和YOLOv8-pose转ONNX及Python后处理代码实现

前言 由于种种原因&#xff0c;原始的YOLOv8系列的模型&#xff0c;在RK3588上难以部署&#xff0c;在 .pt 转 .onnx 的时候需要去掉后处理层&#xff08;主要是DFL层&#xff09;。因此&#xff0c;模型的后处理需要自己来实现。 本文基于Rockship 官方给的源码&#xff08;导…

Lua的table(表)

Lua表的基本概念 Lua中的表&#xff08;table&#xff09;是一种多功能数据结构&#xff0c;可以用作数组、字典、集合等。表是Lua中唯一的数据结构机制&#xff0c;其他数据结构如数组、列表、队列等都可以通过表来实现。 表的实现 Lua的表由两部分组成&#xff1a; 数组部分…

权限(1)

权限1 一、shell命令及运行原理二、linux中的用户1、身份切换 2、sudo &#xff1a;指令的短暂提权&#xff08;输入用户自己的密码&#xff09;3、权限理解4、拥有者&#xff0c;所属组&#xff0c;other5&#xff0c;文件属性6、修改权限&#xff08;角色 / 属性&#xff09;…

【实战】使用PCA可视化神经网络提取后的特征空间【附源码】

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…

Lumoz Chain正式上线:AI 时代的新算力破局者

新的叙事和技术突破永远是推动行业前行的核心动力。当下&#xff0c;AI Agent无疑是最炙手可热的赛道之一。 当加密世界将目光投向AI领域时&#xff0c;大多数项目仍停留在以AI为工具或应用场景的层面&#xff0c;试图通过集成AI模型或优化链上功能来吸引用户。然而&#xff0c…

《如何利用看板工具提升学习效率?》

从零开始&#xff1a;用看板工具打造高效学习管理系统 在当今这个信息爆炸的时代&#xff0c;知识更新换代的速度快得惊人&#xff0c;无论是学生、职场人士还是终身学习者&#xff0c;都面临着如何有效管理学习过程、提升学习效率的难题。而板栗看板这款软件&#xff0c;或许…

基于STM32的智能垃圾分类与回收系统

1. 引言 传统垃圾处理方式存在分类效率低、资源浪费严重等问题&#xff0c;难以满足城市可持续发展的需求。本文设计了一款基于STM32的智能垃圾分类与回收系统&#xff0c;通过视觉识别、多传感器融合与自动化分拣技术&#xff0c;实现垃圾精准分类、压缩存储与资源回收&#…

C++:dfs,bfs各两则

1.木棒 167. 木棒 - AcWing题库 乔治拿来一组等长的木棒&#xff0c;将它们随机地砍断&#xff0c;使得每一节木棍的长度都不超过 5050 个长度单位。 然后他又想把这些木棍恢复到为裁截前的状态&#xff0c;但忘记了初始时有多少木棒以及木棒的初始长度。 请你设计一个程序…

Web端——超级马里奥【简化版】

1.介绍 这是一个简单的受超级马里奥启发的平台游戏演示&#xff01;这个基于网络的游戏包括&#xff1a; 角色移动&#xff1a;使用箭头键让马里奥向左和向右移动&#xff0c;空格键或向上箭头键跳跃。跳跃平台&#xff1a;游戏中有多个可以跳跃的平台&#xff0c;包括经典的…

PEFT介绍及其源码解析

PEFT库介绍 PEFT&#xff08;Parameter-Efficient Fine-Tuning&#xff0c;参数高效微调&#xff09;是由 Hugging Face 开源的一个高效微调库&#xff0c;旨在通过少量可训练参数实现对大型预训练模型的快速适应&#xff0c;从而显著降低计算和存储成本。 核心功能与优势 多…

osgEarth安装总结

第一步&#xff1a;安装OSG 直接通过git下载源码&#xff0c;使用cmake进行编译&#xff0c; git clone --depth 1 https://github.com/openscenegraph/OpenSceneGraph.git mkdir build cd build cmake .. make sudo make isntall编译过程中缺什么库&#xff0c;就安装什么库 …

实体机器人在gazebo中的映射

这一部分目的是将真实的机器人映射到gazebo中&#xff0c;使得gazebo中的其他虚拟机器人能识别到真实世界的wheeltec机器人。 真实机器人的型号的wheeltec旗下的mini_mec。 一、在wheeltec官方百度云文档中找到URDF原始导出功能包.zip 找到对应的包 拷贝到工作空间下 在原有…

8、HTTP/1.0和HTTP/1.1的区别【高频】

第一个是 长连接&#xff1a; HTTP/1.0 默认 短连接&#xff0c;&#xff08;它也可以指定 Connection 首部字段的值为 Keep-Alive实现 长连接&#xff09;而HTTP/1.1 默认支持 长连接&#xff0c;HTTP/1.1是基于 TCP/IP协议的&#xff0c;创建一个TCP连接是需要经过三次握手的…

kafka-leader -1问题解决

一. 问题&#xff1a; 在 Kafka 中&#xff0c;leader -1 通常表示分区的领导者副本尚未被选举出来&#xff0c;或者在获取领导者信息时出现了问题。以下是可能导致出现 kafka leader -1 的一些常见原因及相关分析&#xff1a; 1. 副本同步问题&#xff1a; 在 Kafka 集群中&…