背景

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

为什么仿JD APP？

因为像JD这种电商APP无论是业务逻辑还是页面复杂度都是比较复杂的，一来可以体验一下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

分类

image.png

功能	方案
banner	flutter_swipper
扫一扫	barcode_scan

购物车

image.png

功能	方案
商品选择
倒计时	Timer.periodic
商品数量增减	自定义组件

我的

image.png

功能	方案
header滚动渐变	监听滚动位置设置Appbar opacity
其它	页面效果还原

商详

I love China, love huawei

image.png

 

image.png

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

设置

image.png

注册登录

image.png

功能	方案	备注
登录注册	leancloud	注册登录图省事，整了一个页面（点注册按钮即使用当前输入的用户名密码注册）
账密	账号 admin 密码 admin	无

GIT仓库地址

APP端：

https://github.com/DiscoverForever/learn_flutter

Server端：

https://github.com/DiscoverForever/flutter_mock_server

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

项目目录结构

image.png

项目使用第三方库一览

 

name: learn_flutter
description: A new Flutter project.
version: 1.0.0+1environment:sdk: ">=2.2.2 <3.0.0"dependencies:flutter:sdk: fluttercupertino_icons: ^0.1.2# 轮播插件flutter_swiper: ^1.1.6# toastfluttertoast: ^4.0.1# 网络请求dio: ^3.0.8# webview# flutter_webview_plugin: ^0.3.5# webviewwebview_flutter: ^0.3.19json_annotation: ^3.0.0# 城市选择器city_pickers: ^0.1.30# 扫描插件barcode_scan: ^2.0.1# Leancloudleancloud_storage: ^0.2.3# 官方缓存插件shared_preferences: ^0.5.6# provideprovide: ^1.0.2
dev_dependencies:flutter_test:sdk: flutter# json generatorbuild_runner: ^1.0.0json_serializable: ^3.3.0uses-material-design: trueassets:- lib/assets/json/movie.jsonfonts:- family: FlamanteRomafonts:- asset: lib/assets/fonts/Flamante-Roma-Medium.ttf- asset: lib/assets/fonts/Flamante-Roma-MediumItalic.ttf- family: LatoBoldfonts:- asset: lib/assets/fonts/Lato-Bold.ttf- family: PingFangfonts:- asset: lib/assets/fonts/PingFang.ttf

免责声明

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

作者：IM唐钰小宝
链接：https://www.jianshu.com/p/60588d6a076b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。