脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Flutter fluro配置使用

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

 更新时间：2021年09月08日 11:34:19   作者：JoeYoung  
Flutter本身提供了路由机制，本文主要介绍了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 Set存储自定义对象时保证唯一的方法详解

    Flutter Set存储自定义对象时保证唯一的方法详解

    在Flutter中,Set和List是两种不同的集合类型,List中存储的元素可以重复,Set中存储的元素不可重复,如果想在Set中存储自定义对象,需要确保对象的唯一性,那么如何保证唯一,接下来小编就给大家详细的介绍一下
    2023-11-11
  • Android permission denied原因归纳和解决办法

    Android permission denied原因归纳和解决办法

    大家好，本篇文章主要讲的是Android permission denied原因归纳和解决办法，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下哦
    2021-12-12
  • Flutter学习LogUtil封装与实现实例详解

    Flutter学习LogUtil封装与实现实例详解

    这篇文章主要为大家介绍了Flutter学习LogUtil封装与实现实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • Android listview数据显示及提示信息的实例

    Android listview数据显示及提示信息的实例

    这篇文章主要介绍了Android listview数据显示及提示信息的实例的相关资料,需要的朋友可以参考下
    2017-05-05
  • Android自定义滑动解锁控件使用详解

    Android自定义滑动解锁控件使用详解

    这篇文章主要为大家详细介绍了Android自定义滑动解锁控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Android实现微信加号菜单模式

    Android实现微信加号菜单模式

    这篇文章主要为大家详细介绍了Android实现微信加号菜单模式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Android 音乐播放器的开发实例详解

    Android 音乐播放器的开发实例详解

    本文主要讲解Android 音乐播放器的开发，这里给大家提供一个简单的示例代码，和实现效果图，有需要开发音乐播放器的朋友可以参考下
    2016-08-08
  • 深入Android Handler,MessageQueue与Looper关系

    深入Android Handler,MessageQueue与Looper关系

    这篇文章主要介绍了深入Android Handler,MessageQueue与Looper关系,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Android仿微博个人详情页滚动到顶部的实例代码

    Android仿微博个人详情页滚动到顶部的实例代码

    这篇文章主要介绍了Android仿微博个人详情页滚动到顶部的实例代码,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴家，需要的朋友可以参考下
    2019-05-05
  • Android登录时密码保护功能

    Android登录时密码保护功能

    这篇文章主要为大家详细介绍了Android登录时密码保护功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论