Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 48 additions & 52 deletions README-EN.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@

## English | [中文](README.md)

This project is an exercise in learning Flutter for personal growth and development.

To achieve specific design outcomes and meet the demands of daily development, one may employ the methods of configuring, modifying, combining pre-existing components, and customizing.

The design plans for this project can be found in the "design" directory. You may utilize these plans to practice with a specific goal in mind. Any implementation is solely based on personal comprehension and learning. Should there be any superior implementation strategies, I welcome the opportunity for discussion.
A continuously maintained, practice-oriented Flutter project that targets real-world business scenarios. It focuses on essential capabilities and engineering best practices through configuration, encapsulation, and moderate customization. Design assets are located in the `design` directory for guided implementation.

## Preview

Expand All @@ -25,34 +21,17 @@ Some of the page effects are as follows:

**If you find this project satisfactory, kindly show your support by giving it a Star or Fork. Rest assured, this project is being continuously maintained and any issues can be brought to our attention by submitting an Issue.**

## Realizing the content.

* MVP pattern
* State management using `provider` (version 6.x)
* Network request encapsulation based on `dio` (version 5.x)
* Integration testing and accessibility testing
* Support for dark mode
* Localization(Thanks to @ghedwards)
* Implementation of complex scrolling effects using `Sliver` series components
* Location selection using AMap (supports Web)
* Encapsulation of common widgets handling
* Pull-to-refresh and load-more functionality
* Application update check
* PopupWindow
* QR code scanning functionality (using the qr_code_scanner plugin)
* Menu switching animations (circular expansion, 3D flip)
* Swipe-to-delete
* City selection
* Three-level linkage selection similar to JD's city selection
* Various custom dialogs
* Sticky header for lists
* Password input keyboard
* Verification code input box
* Custom simple calendar
* Line chart and [pie charts](https://dartpad.cn/d06f8f737d6eb2d87978eb2d14b87864)
* Modularized route management
* More demos (ripple animation, scratch card, lottie)
* More detailed optimizations
## Features

- Routing: migrated to Navigator 2.0 using `go_router`, with a compatibility layer for gradual adoption
- Networking: `dio` encapsulation with unified error handling
- State: `provider` for state management, theme and locale
- UI/UX: dark mode, localization, complex scrolling (Sliver), WebView
- Device: image picking, vibration, device info
- Map: AMap 2D (Web supported)
- Engineering: integration & accessibility tests, modularized route management
- Animations/Charts: Lottie, line/pie charts, more demos (ripple, scratch card, etc.)
- QR scanning: `qr_code_scanner` (enable on demand)

You may download and experience it specifically by accessing the following links:

Expand All @@ -62,29 +41,47 @@ As for iOS, you will need to download and run the code on your own.

For web experience, please visit: https://simplezhli.github.io/flutter_deer/

## The project's operational environment.
## Requirements

[![flutter_deer driver](https://github.com/simplezhli/flutter_deer/actions/workflows/flutter-drive.yml/badge.svg?branch=master)](https://github.com/simplezhli/flutter_deer/actions/workflows/flutter-drive.yml)

1. Flutter version 3.38.1
- Flutter 3.38.x (stable)
- Dart 3.10.x
- iOS minimum `iOS 14.0+`
- Android `compileSdk/targetSdk 36`

2. Dart version 3.10.0
Note: On Windows/macOS, the project mainly serves UI preview; verify native capabilities on device/simulator.

## Precautions to be taken.
## Getting Started

- In debug mode, there may be some lagging, which is considered a normal occurrence. A satisfactory experience requires the creation of a release package. To create a release version for iOS, execute the command `flutter build ios`. For Android, execute the command `flutter build apk`.
1. Install Flutter (stable channel), ensure `flutter --version` is 3.38.x
2. Fetch dependencies: `flutter pub get`
3. Run
- Android: `flutter run -d android`
- iOS: `flutter run -d ios` (for native libs, run `cd ios && pod install` first)
- Web: `flutter run -d chrome`
4. Build
- Android: `flutter build apk`
- iOS: `flutter build ios`

- If there are any issues with the project's execution, please refer to the [iOS issue summary](./docs/iOS问题汇总.md) and [Android issue summary](./docs/Android问题汇总.md) for possible solutions.
Optional: to enable QR scanning, uncomment the related entries in `pubspec.yaml` and configure platform permissions.

- Due to certain plugin limitations, this project is only available for preview on Windows and macOS. Those interested may run and experience it themselves.

- To view the functionality demonstration, execute the integration test command `flutter drive --target=test_driver/driver.dart`.
## Routing Migration

- Due to the abundance of pages, it may be difficult to match the design at first. However, I have added the relative path of the design in the code comments, which can be searched or located for the corresponding page. I hope this will be helpful to you.
- Introduced `go_router` for Navigator 2.0
- Existing `NavigatorUtils` calls remain functional via a compatibility layer
- Modules including WebView, Login, Goods, Orders, Store, Account, Settings, and Statistics are integrated with the new routing configuration

- This project uses the [FlutterJsonBeanFactory](https://github.com/zhangruiyu/FlutterJsonBeanFactory) plugin to generate Beans.
## Build & Testing

- Web performance may be slower due to large resource files such as js and deployment on Github.
- For best performance, build release packages: `flutter build apk` / `flutter build ios`
- Integration tests and demo: `flutter drive --target=test_driver/driver.dart`

## Troubleshooting

- iOS CocoaPods/FFI architecture mismatch: use ARM-native `ffi 1.15.5` and ensure Pod sources are accessible; consider using mirrors when needed
- `qr_code_scanner` may fail to fetch sub-dependencies under certain network conditions; temporarily disable or configure mirrors before re-enabling
- Refer to `docs` for iOS/Android issue summaries

## Summary of Experience

Expand Down Expand Up @@ -128,7 +125,7 @@ For web experience, please visit: https://simplezhli.github.io/flutter_deer/
| [provider](https://github.com/rrousselGit/provider) | **State management** |
| [flutter_2d_amap](https://github.com/simplezhli/flutter_2d_amap) | **2D map from Amap** |
| [cached_network_image](https://github.com/renefloor/flutter_cached_network_image) | **Image loading** |
| [fluro](https://github.com/theyakka/fluro) | **Routing management** |
| [go_router](https://github.com/flutter/packages/tree/main/packages/go_router) | **Routing (Navigator 2.0)** |
| [flutter_oktoast](https://github.com/OpenFlutter/flutter_oktoast) | **Toast notifications** |
| [common_utils](https://github.com/Sky24n/common_utils) | **Common Dart utility library** |
| [flutter_slidable](https://github.com/letsar/flutter_slidable) | **Swipe-to-delete** |
Expand All @@ -151,13 +148,12 @@ For web experience, please visit: https://simplezhli.github.io/flutter_deer/

For details, please refer to the [pubspec.yaml](https://github.com/simplezhli/flutter_deer/blob/master/pubspec.yaml) file.

## Plan:

* [x] Web support.

* [x] Migrate to null-safety.
## Plan

* [ ] Migrate to Navigator 2.0.
- [x] Web support
- [x] Null-safety migration
- [x] Navigator 2.0 (go_router) migration & compatibility
- [ ] Ongoing modular improvements and cross-platform validation

## Thanks For

Expand Down
114 changes: 45 additions & 69 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@

## [English](README-EN.md) | 中文

本项目为个人学习Flutter的练习项目。

通过设置、修改、组合自带部件以及自定义来实现具体的设计效果,满足日常开发的需求。

本项目设计图见design目录,你可以通过我提供的设计图有目标的去练习。所有的实现仅是个人的学习理解,如果有更好的实现方案欢迎交流。
一个以真实业务场景为目标的 Flutter 学习与实践项目,持续维护中。通过配置、封装与适度自定义,聚焦常见业务能力与工程化最佳实践。设计图位于 `design` 目录,便于对照练习与实现。

## 预览

Expand All @@ -25,34 +21,17 @@

**觉得还可以的话,来个Star、Fork支持一波!本项目持续维护中,有问题欢迎提Issue。**

## 实现内容(已迁移到空安全)

* mvp模式
* 使用`provider` (6.x 版本)做状态管理
* 基于`dio` (5.x 版本)的网络请求封装
* 完整的集成测试、可访问性测试。
* 支持深色模式
* 本地化(感谢 @ghedwards)
* 使用`Sliver` 系列组件实现复杂滚动效果
* 使用高德地图定位选择地址(支持Web)
* 通用Widget的处理封装
* 下拉刷新 + 上拉加载更多
* 应用检查更新
* PopupWindow
* 扫码功能(qr_code_scanner插件)
* 菜单切换动画(圆形扩散、3D翻转)
* 侧滑删除
* 城市选择
* 类似京东选择城市的三级联动
* 各种自定义Dialog
* 列表头部吸顶
* 密码输入键盘
* 验证码输入框
* 自定义简易日历
* 曲线图及[饼状图](https://dartpad.cn/d06f8f737d6eb2d87978eb2d14b87864)
* 模块化路由管理
* 更多Demo(水波纹动画、刮刮卡、lottie)
* 更多的细节优化
## 主要特性

- 路由:已迁移至 Navigator 2.0(基于 `go_router`),保留兼容层便于渐进迁移
- 网络:`dio` 封装与统一错误处理
- 状态:`provider` 状态管理与主题/语言设定
- UI/UX:深色模式、本地化、复杂滚动(Sliver)、WebView
- 设备能力:图片选择、震动、设备信息
- 地图定位:高德 2D 地图(支持 Web)
- 工程化:集成测试与可访问性测试、模块化路由管理
- 动画/图表:Lottie、曲线图/饼图、更多 Demo(涟漪、刮刮卡等)
- 扫码能力:`qr_code_scanner`(按需启用)

具体可以下载体验:

Expand All @@ -62,31 +41,41 @@ iOS需要自行下载代码运行。

Web体验地址:https://simplezhli.github.io/flutter_deer/

## 项目运行环境
## 环境与平台

[![flutter_deer driver](https://github.com/simplezhli/flutter_deer/actions/workflows/flutter-drive.yml/badge.svg?branch=master)](https://github.com/simplezhli/flutter_deer/actions/workflows/flutter-drive.yml)

1. Flutter version 3.38.1

2. Dart version 3.10.0
- Flutter 3.38.x(稳定版)
- Dart 3.10.x
- iOS 最低版本 `iOS 14.0+`
- Android `compileSdk/targetSdk 36`

## 注意事项
提示:本项目在 Windows、macOS 以 UI 预览为主,原生能力请在真机/模拟器验证。

- `debug`模式下会有部分卡顿现象,这属于正常现象。良好的体验需要打`release` 包。
iOS可以执行命令`flutter build ios` 以创建`release`版本。
Android可以执行命令`flutter build apk` 以创建`release`版本。
## 快速开始

- 项目运行有问题可以在[iOS问题汇总](./docs/iOS问题汇总.md)、[Android问题汇总](./docs/Android问题汇总.md)中尝试寻找解决办法。
1. 安装 Flutter(稳定通道),确保 `flutter --version` 在 3.38.x
2. 拉取依赖:`flutter pub get`
3. 运行
- Android:`flutter run -d android`
- iOS:`flutter run -d ios`(若使用原生库,需先 `cd ios && pod install`)
- Web:`flutter run -d chrome`
4. 构建发布
- Android:`flutter build apk`
- iOS:`flutter build ios`

- 由于部分插件的原因,本项目在Windows、macOS仅做预览(主要为原生功能方面,UI问题不大)。有兴趣的可自行运行体验
可选:如需启用扫码,取消 `pubspec.yaml` 中相关注释并按平台完成权限配置

- 可以执行集成测试命令`flutter drive --target=test_driver/driver.dart` 查看功能演示。
## 构建与测试

- 因为页面有点多,一开始可能会导致页面无法与设计图对应上。我在代码注释中有添加设计图的相对路径,可以搜索或查找到对应页面,希望对你有帮助。
- 体验更流畅的效果请使用 `release` 包:`flutter build apk` / `flutter build ios`
- 集成测试与演示:`flutter drive --target=test_driver/driver.dart`

## 疑难排查

- 本项目使用[FlutterJsonBeanFactory](https://github.com/zhangruiyu/FlutterJsonBeanFactory)插件来生成Bean。

- Web受制于js等资源过大和部署在Github上,访问会慢一些。
- iOS 端 CocoaPods/FFI 架构问题:建议使用 ARM 原生 `ffi 1.15.5` 并确保 Pod 源可用;必要时使用镜像源
- `qr_code_scanner` 在国内网络环境下可能拉取子依赖失败:可先按需注释依赖或配置镜像源后再启用
- 更多问题参见 `docs` 目录的 iOS/Android 问题汇总

## 心得总结(推荐阅读)

Expand Down Expand Up @@ -132,7 +121,7 @@ Web体验地址:https://simplezhli.github.io/flutter_deer/
| [provider](https://github.com/rrousselGit/provider) | **状态管理** |
| [flutter_2d_amap](https://github.com/simplezhli/flutter_2d_amap) | **高德2D地图** |
| [cached_network_image](https://github.com/renefloor/flutter_cached_network_image) | **图片加载** |
| [fluro](https://github.com/theyakka/fluro) | **路由管理** |
| [go_router](https://github.com/flutter/packages/tree/main/packages/go_router) | **路由管理(Navigator 2.0)** |
| [flutter_oktoast](https://github.com/OpenFlutter/flutter_oktoast) | **Toast** |
| [common_utils](https://github.com/Sky24n/common_utils) | **Dart 常用工具类库** |
| [flutter_slidable](https://github.com/letsar/flutter_slidable) | **侧滑删除** |
Expand All @@ -155,27 +144,14 @@ Web体验地址:https://simplezhli.github.io/flutter_deer/

详细内容可以参看[pubspec.yaml](https://github.com/simplezhli/flutter_deer/blob/master/pubspec.yaml)文件

## 后续计划:

* [x] 添加地图功能,具体实现插件见 [flutter_2d_amap](https://github.com/simplezhli/flutter_2d_amap)

* [x] 下拉刷新 + 上拉加载更多

* [x] 引入状态管理,预计使用 [provider](https://github.com/rrousselGit/provider)

* [x] 页面添加设计图路径注释,方便寻找对应的设计图。

* [x] 添加集成测试。

* [x] 深色模式支持。

* [x] 添加`Semantics`(语义)

* [x] Web端支持。

* [x] 迁移到空安全。(安装包减少135KB,10.3M -> 10.1M)
## 计划

* [ ] 迁移至Navigator 2.0。
- [x] Web 支持
- [x] 迁移至空安全
- [x] 深色模式与可访问性
- [x] 集成测试
- [x] Navigator 2.0(go_router)迁移与兼容
- [ ] 持续完善模块化与跨端验证

## 已知存在问题:

Expand Down
2 changes: 1 addition & 1 deletion android/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ android {
defaultConfig {
applicationId "com.weilu.deer"
minSdkVersion flutter.minSdkVersion
targetSdkVersion 35
targetSdkVersion 36
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
Expand Down
7 changes: 3 additions & 4 deletions ios/Podfile
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
# Uncomment this line to define a global platform for your project
platform :ios, '13.0'
platform :ios, '14.0'

# source 'https://github.com/CocoaPods/Specs.git'
# source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'
source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'
# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'

Expand Down Expand Up @@ -46,7 +45,7 @@ post_install do |installer|
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0'
end
# https://github.com/flutter/flutter/issues/90504 #84562
config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386'
config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'i386'
end
end
end
Loading