Flutter 电商项目最佳实践(适合新手已开源)
该项目为Github开源项目,地址:https://github.com/simplezhli/flutter_deer
该项目非常适合作为个人学习Flutter的练习项目。
通过设置、修改、组合自带部件以及自定义来实现具体的设计效果,满足日常开发的需求。
基本功能涵盖:
- mvp模式
- 使用
provider
(5.x 版本)做状态管理 - 基于
dio
(4.x 版本)的网络请求封装 - 完整的集成测试、可访问性测试。
- 支持深色模式
- 本地化(感谢 @ghedwards)
- 使用
Sliver
系列组件实现复杂滚动效果 - 使用高德地图定位选择地址(支持Web)
- 通用Widget的处理封装
- 下拉刷新 + 上拉加载更多
- 应用检查更新
- PopupWindow
- 扫码功能(qr_code_scanner插件)
- 菜单切换动画(圆形扩散、3D翻转)
- 侧滑删除
- 城市选择
- 类似京东选择城市的三级联动
- 各种自定义Dialog
- 列表头部吸顶
- 密码输入键盘
- 验证码输入框
- 自定义简易日历
- 曲线图及饼状图
- 模块化路由管理
- 更多Demo(水波纹动画、刮刮卡、lottie)
- 更多的细节优化
具体可以下载体验:
Android版安装包:点击下载,下载密码:111111
。
iOS需要自行下载代码运行。
Web体验地址:https://simplezhli.github.io/flutter_deer/
项目运行环境
1. Flutter version 2.2.1
2. Dart version 2.13.1
注意事项
debug
模式下会有部分卡顿现象,这属于正常现象。良好的体验需要打release
包。 iOS可以执行命令flutter build ios
以创建release
版本。 Android可以执行命令flutter build apk
以创建release
版本。- 项目运行有问题可以在iOS问题汇总、Android问题汇总中尝试寻找解决办法。
- 由于部分插件的原因,本项目在Windows、macOS仅做预览(主要为原生功能方面,UI问题不大)。有兴趣的可自行运行体验。
- 可以执行集成测试命令
flutter drive --target=test_driver/driver.dart
查看功能演示。 - 因为页面有点多,一开始可能会导致页面无法与设计图对应上。我在代码注释中有添加设计图的相对路径,可以搜索或查找到对应页面,希望对你有帮助。
- 本项目使用FlutterJsonBeanFactory插件来生成Bean。
- Web受制于js等资源过大和部署在Github上,访问会慢一些。
上手即来
已经接入开源,进行了二开
Are you FrontEnd developer? Can you give me some help?