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上,访问会慢一些。

 

评论

这篇文章目前有 3 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Sidebar