专栏首页Flutter从0到1构建大前端应用flutter仿BOSS直聘(二),大前端技术实现

flutter仿BOSS直聘(二),大前端技术实现

项目简介

记得上一篇的写作时间还在2018年2月份,已经很久没更新了,而flutter的版本更新了好几次,自flutter 1.0正式版推出之后,一直有打算把之前的项目重写一下,因为flutter本身更新了许多新特性,老的已经是过去式了,也老有人来问我,之前的项目运行不了,是的,因为sdk太老了,而且之前的项目纯粹是练手玩。

在过去的这段时间里,踊跃出了很多关于flutter的技术文章和开源项目例子,基本上每天都有,同比RN刚出来时,热情度远超RN。于是,笔者怀着对新技术热情的学习态度重写了这个开源项目,并且后续也会不断完善。

为什么选仿BOSS直聘作为题材? 因为这款APP相信大家都在使用,里面组件繁多且有一定复杂度,能衍生出来许多基于flutter组件库的子项目,里面有些功能,比如地图,IM,后面都会使用flutter来实现。为了让项目更接近真实,这次连服务端也实现了。先把开源地址提供给大家:

github地址:

服务端版本:flutter仿boss直聘服务端.

flutter版本:flutter仿boss直聘.

项目效果图:

相关技术点

服务端:

  • 基于puppeteer + mongo + nodejs实现爬虫服务器,使用nuxt + koa2 + vue实现服务端渲染以及api服务接口。这里就不过多占用篇幅了,本文主要还是讲flutter,对前端感兴趣的会另外分享相关技术话题。

flutter端:

  • 项目中使用以下组件,请记住一句咒语:flutter一切皆组件。 Container, Row, Column, Flex, ListView, CustomListView, Wrap, Padding, Center, Future, FutureBuilder, Expanded, Navigator, BottomNavigationBar, GesureDetector, Listener, CircleAvatar等以及一些自定义组件。
  • 布局语义化,不滥用布局组件,并尽量简化组件嵌套结构

技术细节

  • 实现启动画面,在启动1.5秒后,跳转到app里,并且把启动画面的路由remove掉。
Navigator.of(context).pushAndRemoveUntil(
    PageRouteBuilder<Null>(
      pageBuilder: (BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation) {
        return AnimatedBuilder(
          animation: animation,
          builder: (BuildContext context, Widget child) {
            return Opacity(
              opacity: animation.value,
              child: new MainPage(title: 'Boss直聘'),
            );
          },
        );
      },
      transitionDuration: Duration(milliseconds: 300),
    ),
    (Route route) => route == null);
  • 列表页面,没啥好说的,ListView大家应该都用过,只是需要记住一点,列表再跳转详情时需要记录当前列表的滚动位置,只需加入以下代码即可: key: new PageStorageKey('key-name')
  • Hero动画,在详情页面里,用了2处Hero动画,Hero动画是在route切换过程中执行的动画。需要当前页和目标页一一对应起来。
Hero(
  tag: heroLogo,
  child: ClipRRect(
    borderRadius: new BorderRadius.circular(8.0),
    child: Image.network(
      widget.company.logo,
      width: 70,
      height: 70,
    ),
  ),
)),
  • CustomListView滑动时appBar显示隐藏title。大家都知道,flexibleSpace里的CollapseMode.parallax属性可以在屏幕滚动时把title移动到appBar里,可实际上,布局是定制的,实现不了官方的那种效果,于是通过监听ScrollController并计算滚动位置的方式修改state属性让appBar的title根据滚动位置显示隐藏。
 _scrollListener() {
    setState(() {
      if (_scrollController.offset < 56 && _isShow) {
        _isShow = false;
      } else if (_scrollController.offset >= 56 && _isShow == false) {
        _isShow = true;
      }
    });
  }
复制代码

TODO-LIST

  • 公司详情页slidePanel控件实现
  • 公共弹层组件封装
  • 消息列表控件封装并实现测滑删除功能

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • flutter仿boss直聘,一个比较完整的例子(一)

    简介:2年前,RN刚出来时做了个仿拉钩的demo,react-native-lagou. 这次flutter来了,想感受一下,索性用目前flutter的版本写的...

    kimihe
  • Flutter:使用手势识别做一个360旋转展物

    最近在复习Flutter的GestureDetector相关知识时,想到了以前用Android实现的展物项目,这次完整的用Flutter实现了一下,真是感觉代码...

    kimihe
  • # vue cli3总结(未完待续)

    比如需要安装:vue-cli-plugin-vuetify 则执行:vue add vuetify

    kimihe
  • Flutter 简明指南

    flutter没有css的概念,在flutter里都是对象,例如,颜色的设置,通过颜色对象来设置:

    mixlab
  • Flutter基础篇(7)-- Flutter更新错误全面解决方案(图文+视频讲解)

    (我电脑里面已经安装flutter最新版了。为了演示flutter升级过程,我删除了flutter文件夹,重新去github下载flutter文件,并且执行更新...

    AWeiLoveAndroid
  • Flutter单引擎和外接纹理内存优化探索之路

    今年九月初,王者人生Android端及iOS端正式接入flutter跨平台方案来提升开发效率。

    brzhang
  • 转发 | 闲鱼公开多年 Flutter 实践经验

    flutter-boot核心解决了混合开发模式下的两个问题:flutter混合开发的工程化设计和混合栈。那flutter-boot是如何解决的呢?

    Java帮帮
  • 现有项目集成flutter排坑指南

    1、如果选择,stable,我们遇到的情况是,IOS上接入之后是跑不了的。切到master上就OK了。

    brzhang
  • 不得不看的Flutter与Android混合开发

    记得在flutter刚出来时,笔者就开始学习flutter。但由于当时嫌弃flutter复杂的层级组合且未推出稳定版,所以当时就放弃了深入学习,现如今随着flu...

    Android技术干货分享
  • Flutter环境配置-windows

    java jdk 版本1.8.0_261 Java SE 8u261 下载地址:https://www.oracle.com/java/technologies...

    FreeTimeWorker

扫码关注云+社区

领取腾讯云代金券