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要繁琐,但是对于中大型项目却非常适合,它的分层架构也非常方便项目后期的升级和维护,使用时可以根据实际情况进行合理的选择。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • flutter 自定义websocket路由的实现

    在 flutter websocket 中 服务端推送数据给客户端后 很多人的处理居然都是 if / switch; 感觉这样的写法不咋好! 自己想的一个办法: 在 lib 目录下新建一个 socket 目录 里面创建两个文件main.dart和router.dart; main.dart : 主要控制websocket的连接 断开 和收到消息的处理; router.dart 则为websocket 服务端返回的消息做路由处理; router.dart import 'package:lee/l

  • Flutter 局部路由实现详解

    Flutter是借鉴React的开发思想实现的,在子组件的插槽上,React有this.props.children,Vue有<slot></slot>. 当然Flutter也有类似的Widget,那就是Navigator,不过是以router的形式实现(像<router-view></router-view>???). Navigator的使用无非3个属性 initialRoute: 初始路由 onGenerateRoute: 匹配路由 onUnknown

  • Flutter上线项目实战记录之路由篇

    1. 应用场景 开发中经常遇到 路由跳转时拿不到context怎么办,eg: token失效/异地登录跳转登录页面. 获取不到当前路由名称怎么办,eg: 点击push推送跳转指定路由,如果已经在当前页面就replace,如果不在就push. 注册监听路由跳转,做一些想做的事情 ,eg:不同路由,显示不同状态栏颜色. 等等... 2. 解决方案 解决思路: MaterialApp 的routes属性赋值路由数组,navigatorObservers属性赋值路由监听对象NavigatorManage

  • Flutter利用注解生成可自定义的路由的实现

    route_generator是什么 这是一个简单的 Flutter 路由生成库,只需要少量的代码,然后利用注解配合源代码生成,自动生成路由表,省去手工管理路由代码的烦恼. 特性 自定义路由名称 自定义路由动画 自定义路由参数 自定义路由逻辑 依赖 dependencies: # Your other regular dependencies here route_annotation: ^0.1.0 dev_dependencies: # Your other dev_dependencies

  • Flutter开发之路由与导航的实现

    如果说构成视图元素的基本单位是组件,那么构成应用程序的基本单位就是页面.对于拥有多个页面的应用程序而言,如何从一个页面平滑地过渡到另一个页面,是技术框架需要考虑的问题. 在前端开发中,可以使用路由框架来统一管理页面及它们之间的跳转.在Android中路由指的是一个Activity,在iOS中指的是一个ViewController,可以通过startActivity或pushViewController来打开一个新的路由.在Flutter中,路由的管理和导航借鉴了前端和客户端的设计思路,需要使用R

  • Flutter路由的跳转、动画和传参详解(最简单)

    路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面.当然,可以自己去加一个中间层来实现这些功能. Flutter里面是原生支持路由的.Flutter的framework提供了路由跳转的实现.我们可以直接使用这些功能. Flutter路由介绍 Flutte

  • Flutter路由框架Fluro使用简介

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

  • Flutter路由框架Fluro使用教程详细讲解

    目录 1.Navigator使用简介 2.fluro 1.配置 2.使用方法 3.路由拦截 3.封装 1.Navigator使用简介 使用Flutter 的Navigator 导航器可以实现页面的跳转,Navigator的使用方法简单介绍一下: 页面跳转: Navigator.push<void>( context, MaterialPageRoute( builder: (BuildContext context) => const MyHomePage(), ), ); 页面跳转的同

  • Flutter 路由插件fluro的使用

    前面两篇文章我们介绍了Flutter 的原生导航器 Navigator 实现页面跳转,路由及路由拦截的使用,具体可以参考之前的文章: //www.jb51.net/article/215167.htm //www.jb51.net/article/214856.htm 使用原生的路由基本上能够满足大部分需求,但如果想要对页面做类似浏览器 url 那样的路由,或者控制页面跳转的转场动画,那么原生的路由需要做不少的改造.在 pub 上,有优秀的路由插件 fluro 解决这类问题. fluro的使用方

  • Flutter路由之fluro的配置及跳转

    目录 1.pubspec.yaml导包,注意格式~ 2.新建路由类,改类是定义页面的路径,然后将页面handler和路径设置到路由中 3.新建router_handler.dart,处理参数和跳转页面 4.调用传参 5.接收数据 6.问题来了,因为fluro无法直接传中文的,这里就需要用到编码码解码了,也就是encode和decode 1.pubspec.yaml导包,注意格式~ dependencies: flutter: sdk: flutter fluro: ^1.6.3 2.新建路由类,

  • Flutter路由管理插件fluro使用简介

    前面两篇文章我们介绍了Flutter 的原生导航器 Navigator 实现页面跳转,路由及路由拦截的使用,具体可以参考之前的文章: Flutter页面路由及404路由拦截实现 Flutter实现路由参数传递及解析 使用原生的路由基本上能够满足大部分需求,但如果想要对页面做类似浏览器 url 那样的路由,或者控制页面跳转的转场动画,那么原生的路由需要做不少的改造.在 pub上,有优秀的路由插件 fluro解决这类问题. fluro的使用方法 fluro 的使用步骤比较简单,分为下面三个步骤: 构

  • Flutter路由fluro引入配置和使用的具体方法

    目录 flutter_fluro简介 引入fluro 初始化Fluro 编写rotuer_handler 配置路由 把Fluro的Router静态化 把路由注册/注入到顶层 在首页使用 总结: Flutter本身提供了路由机制,作个人的小型项目,完全足够了.但是如果你要作企业级开发,可能就会把入口文件变得臃肿不堪.而再Flutter问世之初,就已经了企业级路由方案fluro. flutter_fluro简介 fluro简化了Flutter的路由开发,也是目前Flutter生态中最成熟的路由框架.

  • Flutter路由传递参数及解析实现

    上一篇Flutter页面路由及404路由拦截实现介绍了使用路由来实现页面的跳转,从而简化页面之间的耦合,并可以实现路由拦截.在实际开发中,我们经常会需要在页面跳转的时候携带路由参数,典型的例子就是从列表到详情页的时候,需要携带详情的 id,以便详情页获取对应的数据.同时,有些时候还需要返回时携带参数返回上一级,以便上级页面根据返回结果更新.本篇将介绍这两种情形的实现. Navigator 的 push 和 pop方法 Navigator 导航器的 push 和 pop 方法可以携带参数在页面间传

  • Flutter应用框架搭建之屏幕适配详解

    目录 原理 flutter_screenutil 添加依赖 初始化 使用 效果 其他 Api 因移动设备的多样性,特别是 Android 的碎片化严重,存在各种各样的分辨率,而 Flutter 跨平台开发又需同时支持 Android 和 iOS ,为尽可能的还原设计图效果提升用户体验,屏幕适配就势在必行了. Flutter 暂时没有官方的屏幕适配方案,在 Flutter 项目开发中目前大部分的适配方案都是通过比例来进行适配,是一个通用的适配方法,该适配方法也在前端.Android.iOS.小程序

  • Android路由框架Router分析详解

    什么是路由?说简单点就是映射页面跳转关系的,当然它也包含跳转相关的一切功能. 路由框架的意义 Android系统已经给我们提供了api来做页面跳转,比如startActivity,为什么还需要路由框架呢?我们来简单分析下路由框架存在的意义: 在一些复杂的业务场景下(比如电商),灵活性比较强,很多功能都是运营人员动态配置的,比如下发一个活动页面,我们事先并不知道具体的目标页面,但如果事先做了约定,提前做好页面映射,便可以自由配置. 随着业务量的增长,客户端必然随之膨胀,开发人员的工作量越来越大,比

  • 5步教你快速写一个android Router路由框架

    Router路由框架 什么是路由?说简单点就是映射页面跳转关系的,当然它也包含跳转相关的一切功能. 前言 网上大片的路由框架实在太多了,实现的方式都大同小异,通过注解实现路由表:但是在多module开发的时候怎么合并路由表,不同的框架有着自己的解决方案. ARouter:通过类查找进行合并路由表. ActivityRouter:通过注解进行路由表合并. 路由框架的意义 Android系统已经给我们提供了api来做页面跳转,比如startActivity,为什么还需要路由框架呢?我们来简单分析下路

随机推荐