背景Flutter从beta版开始就被关注,很多大厂也在用Flutter,比如字节跳动的今日头条,西瓜视频,阿里爸爸的闲鱼,毒app,包括我们公司(一家卖菜的公司)也在一些非主流页面使用Flutter。 据说Flutter极其流畅漂亮,而且抱着不学就会老的心态,我准备抽点闲暇时间试试Flutter。 最近设置了几个端午假期APP的页面,所以我决定本着人人为我,我为人人的精神写一篇博客供大家参考。 为什么要模仿京东APP?由于京东这样的电商app无论是业务逻辑还是页面复杂度都很复杂,所以我们可以在复杂的页面中体验到Flutter的流畅度,也可以看到Flutter是否真的可以投入到生产环境中。 首页模拟器截图-iPhone 11 Pro Max-2020-06-26 at 17.33.25.png功能方案搜索滚动置顶sliver appar+柔性Spacebabanner旋转木马flutter_swiper货架浏览量+网格视图推荐列表flutter_swiper分类image.png功能方案bannerflutter_swipper扫条码_扫描购物车image.png功能方案商品选择倒计时Timer .周期性商品数量增减自定组件我的image.png功能方案表头滚动渐变监视器听滚动位置设置Appbar不透明度其他页面效果恢复商数见《我爱中国》。Huaweiimage.pngimage.png功能方案备注表头滚动渐变无商品轮播图flutter_swiper无地址选择city_pickers无规格选择showCupertinoModalPopup无商品介绍图webview_flutterTODO Android超过550 0身高会死机黑屏。在重置webview高度之前,您需要等待网页加载并获取网页高度。否则会溢出内存。设置image.png注册并登录到image.png。备注注册登录leancloud注册登录省事。一整页(点击注册按钮,用当前输入的客户名称密码注册)。帐户密码帐号管理员密码管理员没有GIT仓库地址。APP端:DiscoverForever/ learn _ flutter服务器端:Discover forever/Flutter _ mock _ server欢迎PR。如果你觉得不错,可以给一个star✨项目的目录结构。image.png使用的第三方库列表项目名称:learn _ flutter描述:一个新的flutter项目. version: 1.0.0+1环境:SDK:" >;= 2 . 2 . 2 & lt;3.0.0 "依赖项:flutter:SDK:flutter cupertino _ icons:0 . 1 . 2 # carousel插件flutter _ wiper:1 . 1 . 6 # toast flutter toast: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 #扫描插件条形码_扫描:2.0.1 json生成器build _ runner:^1.0.0 JSON _ serializable:^3.3.0 uses-material-design:true assets:-lib/assets/JSON/movie . JSON字体:- family: FlamanteRoma字体:-asset:lib/assets/fonts/flamante-Roma-medium . TTF-asset:lib/assets/fonts/flamante-Roma-medium . TTF-family:lato bold字体:-asset:lib/assets/fonts/lato-bold . TTF-family:方平字体:-asset:lib/assets/fonts/ping Fang . TTF免责声明本应用是 项目中使用的图片和字体如有侵权,请联系作者删除本APP的界面数据。请不要将其用于其他商业目的。如果本项目代码造成侵权,与作者求生欲无关。