背景
从 Flutter 公布 beta 版本就始终在关注 Flutter、很多大厂也都在应用 Flutter 比方字节跳动今日头条、西瓜视频、阿里爸爸的闲鱼、毒 APP，包含咱们公司 (一个卖菜的公司) 也在局部非主流程页面应用 Flutter。都说 Flutter 极其晦涩丑陋，本着再不学习就老了的心态，于是筹备抽些空闲工夫来尝试下 Flutter。最近小端午放假 APP 的几个页面也搭建的差不多了，本着人人为我、我为人人的精力决定写个 blog 给大家分享一下。
为什么仿 JD APP？
因为像 JD 这种电商 APP 无论是业务逻辑还是页面复杂度都是比较复杂的，一来能够体验一下 Flutter 在简单页面晦涩度的体现，二来也能够看下到底 Flutter 是否能真正投入生产环境中。
首页
| 性能 | 计划 | |
|---|---|---|
| 搜寻滚动吸顶 | SliverAppBar + FlexibleSpaceBar | |
| Banner 轮播 | flutter_swiper | |
| 货架 | PageView+GridView | |
| 举荐列表 | flutter_swiper |
分类
| 性能 | 计划 |
|---|---|
| banner | flutter_swipper |
| 扫一扫 | barcode_scan |
购物车
| 性能 | 计划 | |
|---|---|---|
| 商品抉择 | ||
| 倒计时 | Timer.periodic | |
| 商品数量增减 | 自定义组件 |
我的
| 性能 | 计划 | |
|---|---|---|
| header 滚动突变 | 监听滚动地位设置 Appbar opacity | |
| 其它 | 页面成果还原 |
商详
I love China, love huawei
| 性能 | 计划 | 备注 |
|---|---|---|
| header 滚动突变 | 无 | |
| 商品轮播图 | flutter_swiper | 无 |
| 地址抉择 | city_pickers | 无 |
| 规格抉择 | showCupertinoModalPopup | 无 |
| 商品详情图 | webview_flutter | TODO Android 超过 5500 高度会黑屏解体 须要期待网页加载完结获取网页高度后从新设置 webview 高度否则会内存溢出 |
设置
注册登录
| 性能 | 计划 | 备注 |
|---|---|---|
| 登录注册 | leancloud | 注册登录图省事，整了一个页面（点注册按钮即应用以后输出的用户名明码注册） |
| 账密 | 账号 admin 明码 admin | 无 |
GIT 仓库地址
APP 端：
https://github.com/DiscoverForever/learn_flutter
Server 端：
https://github.com/DiscoverForever/flutter_mock_server
???? 欢送 PR 感觉不错的能够给个 star✨
我的项目目录构造
# 我的项目应用第三方库一览
name: learn_flutter
description: A new Flutter project.
version: 1.0.0+1
environment:
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.2
dev_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，请勿用于其它商业目标
⚠️如应用本我的项目代码造成侵权与作者无关
我这求生欲????