Flutter路由_fluro引入配置和使用

https://www.cnblogs.com/joe235/p/11309063.html

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文件都要进行配置。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容