纵有疾风起
人生不言弃

Flutter仿京东客户端

背景

从Flutter发布beta版本就一直在关注Flutter、很多大厂也都在使用Flutter比如字节跳动今日头条、西瓜视频、阿里爸爸的闲鱼、毒APP,包括我们公司(一个卖菜的公司)也在部分非主流程页面使用Flutter。都说Flutter极其流畅漂亮,本着再不学习就老了的心态,于是准备抽些闲暇时间来尝试下Flutter。最近小端午放假APP的几个页面也搭建的差不多了,本着人人为我、我为人人的精神决定写个blog给大家分享一下。

为什么仿JD APP?

因为像JD这种电商APP无论是业务逻辑还是页面复杂度都是比较复杂的,一来可以体验一下Flutter在复杂页面流畅度的表现,二来也可以看下到底Flutter是否能真正投入生产环境中。

首页

Flutter仿京东客户端插图
Simulator Screen Shot – iPhone 11 Pro Max – 2020-06-26 at 17.33.25.png
功能 方案
搜索滚动吸顶 SliverAppBar + FlexibleSpaceBar
Banner轮播 flutter_swiper
货架 PageView+GridView
推荐列表 flutter_swiper

分类

Flutter仿京东客户端插图(1)
image.png
功能 方案
banner flutter_swipper
扫一扫 barcode_scan

购物车

Flutter仿京东客户端插图(2)
image.png
功能 方案
商品选择
倒计时 Timer.periodic
商品数量增减 自定义组件

我的

Flutter仿京东客户端插图(3)
image.png
功能 方案
header滚动渐变 监听滚动位置设置Appbar opacity
其它 页面效果还原

商详

I love China, love huawei

Flutter仿京东客户端插图(4)
image.png

Flutter仿京东客户端插图(5)
image.png
功能 方案 备注
header滚动渐变
商品轮播图 flutter_swiper
地址选择 city_pickers
规格选择 showCupertinoModalPopup
商品详情图 webview_flutter TODO Android 超过5500高度会黑屏崩溃 需要等待网页加载结束获取网页高度后重新设置webview高度否则会内存溢出

设置

Flutter仿京东客户端插图(6)
image.png

注册登录

Flutter仿京东客户端插图(7)
image.png
功能 方案 备注
登录注册 leancloud 注册登录图省事,整了一个页面(点注册按钮即使用当前输入的用户名密码注册)
账密 账号 admin 密码 admin

GIT仓库地址

APP端:

https://github.com/DiscoverForever/learn_flutter

Server端:

https://github.com/DiscoverForever/flutter_mock_server

?欢迎PR 觉得不错的可以给个star✨

项目目录结构

Flutter仿京东客户端插图(8)
image.png

项目使用第三方库一览

name: learn_flutterdescription: A new Flutter project.version: 1.0.0+1environment:  sdk: ">=2.2.2 <3.0.0"dependencies:  flutter:    sdk: flutter  cupertino_icons: ^0.1.2  # 轮播插件  flutter_swiper: ^1.1.6  # toast  fluttertoast: ^4.0.1  # 网络请求  dio: ^3.0.8  # webview  # flutter_webview_plugin: ^0.3.5  # webview  webview_flutter: ^0.3.19  json_annotation: ^3.0.0  # 城市选择器  city_pickers: ^0.1.30  # 扫描插件  barcode_scan: ^2.0.1  # Leancloud  leancloud_storage: ^0.2.3  # 官方缓存插件  shared_preferences: ^0.5.6  # provide  provide: ^1.0.2dev_dependencies:  flutter_test:    sdk: flutter  # json generator  build_runner: ^1.0.0  json_serializable: ^3.3.0  uses-material-design: true  assets:    - lib/assets/json/movie.json   fonts:  - family: FlamanteRoma    fonts:    - asset: lib/assets/fonts/Flamante-Roma-Medium.ttf    - asset: lib/assets/fonts/Flamante-Roma-MediumItalic.ttf  - family: LatoBold    fonts:    - asset: lib/assets/fonts/Lato-Bold.ttf  - family: PingFang    fonts:    - asset: lib/assets/fonts/PingFang.ttf

免责声明

⚠️本APP仅限于学习交流使用,项目中使用的图片及字体等资源如有侵权请联系作者删除
⚠️本APP接口数据均为mock,请勿用于其它商业目的
⚠️如使用本项目代码造成侵权与作者无关
我这求生欲?

文章转载于:https://www.jianshu.com/p/60588d6a076b

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » Flutter仿京东客户端

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活