File contents Flutter移动端项目规范
技术栈
框架 : Flutter 3.3.0+
Dart SDK : >=3.3.0 <4.0.0
状态管理 : Provider 6.1.2+
本地存储 : Hive 2.2.3 + Hive Flutter 1.1.0
网络请求 : Dio 5.4.3+1
导航 : Go Router 13.2.1+
UI组件 : Flutter SVG 2.0.10+1
表单验证 : Form Validator 2.1.1+
日期选择器 : Flutter DateTime Picker 1.5.1+
图片选择器 : Image Picker 1.0.4+
家族树可视化 : Flutter Fancy Tree View 1.3.0+
项目结构
frontend/android/
├── android/ # Android平台代码
├── ios/ # iOS平台代码
├── lib/ # Dart源代码
│ ├── models/ # 数据模型
│ ├── providers/ # 状态管理
│ ├── routes/ # 路由配置
│ ├── services/ # 服务层
│ ├── views/ # 页面视图
│ └── main.dart # 应用入口
├── linux/ # Linux平台代码
├── macos/ # macOS平台代码
├── pubspec.yaml # 项目配置
└── analysis_options.yaml # 代码分析配置
编码规范
命名规范
文件命名 : 小写字母,使用下划线分隔,如 auth_provider.dart
类名 : 首字母大写,驼峰命名,如 AuthProvider
变量命名 : 首字母小写,驼峰命名,如 userService
常量命名 : 全大写,下划线分隔,如 API_BASE_URL
方法命名 : 首字母小写,驼峰命名,如 loginUser
私有成员 : 以下划线开头,如 _privateVariable
代码风格
使用 2 空格缩进
每行不超过 80 个字符
方法体之间空一行
类成员之间空一行
注释清晰,说明方法功能和参数含义
遵循 Dart 官方风格指南
核心规范
1. 状态管理规范
使用 Provider 进行状态管理
按功能模块划分 Provider
状态定义应清晰,包含必要的类型注释
异步操作应使用 async/await
状态更新应通过 notifyListeners() 通知
2. 路由规范
使用 Go Router 进行导航
路由配置应按模块组织
路由路径使用 kebab-case
路由守卫应统一管理
懒加载页面以优化性能
3. 网络请求规范
使用 Dio 进行 HTTP 请求
配置统一的 baseURL 和拦截器
请求和响应数据应进行类型检查
错误处理应统一管理
API 调用应封装在服务层
4. 本地存储规范
使用 Hive 进行本地存储
数据模型应实现 HiveObject
类型适配器应正确注册
存储操作应封装在服务层
5. UI 组件规范
遵循 Material Design 设计规范
组件应遵循单一职责原则
复杂组件应拆分为更小的子组件
响应式设计应考虑不同屏幕尺寸
主题配置应统一管理
6. 表单处理规范
使用 Form Validator 进行表单验证
表单状态应通过 Provider 管理
错误信息应清晰显示
表单提交应使用异步操作
提交状态应提供视觉反馈
7. 错误处理规范
全局错误处理应在 Dio 拦截器中实现
页面级错误应在组件中捕获并显示
错误信息应友好且具有指导性
关键操作应提供错误重试机制
8. 性能优化规范
组件懒加载
图片优化
代码分割
缓存策略
避免不必要的重建
开发流程
需求分析与设计
页面结构设计
数据模型定义
服务层实现
状态管理实现
路由配置
UI 组件开发
测试与调试
代码审查
构建与部署
最佳实践
遵循 Flutter 官方最佳实践
使用 null safety
组件复用与抽象
响应式设计
可访问性考虑
国际化支持
单元测试与集成测试
代码格式化与 linting
性能监控与优化
1 --- 2 name: mobile 3 description: Flutter移动端项目规范 4 --- 5 # Flutter移动端项目规范 6 7 ## 技术栈 8 - **框架**: Flutter 3.3.0+ 9 - **Dart SDK**: >=3.3.0 <4.0.0 10 - **状态管理**: Provider 6.1.2+ 11 - **本地存储**: Hive 2.2.3 + Hive Flutter 1.1.0 12 - **网络请求**: Dio 5.4.3+1 13 - **导航**: Go Router 13.2.1+ 14 - **UI组件**: Flutter SVG 2.0.10+1 15 - **表单验证**: Form Validator 2.1.1+ 16 - **日期选择器**: Flutter DateTime Picker 1.5.1+ 17 - **图片选择器**: Image Picker 1.0.4+ 18 - **家族树可视化**: Flutter Fancy Tree View 1.3.0+ 19 20 ## 项目结构 21 ``` 22 frontend/android/ 23 ├── android/ # Android平台代码 24 ├── ios/ # iOS平台代码 25 ├── lib/ # Dart源代码 26 │ ├── models/ # 数据模型 27 │ ├── providers/ # 状态管理 28 │ ├── routes/ # 路由配置 29 │ ├── services/ # 服务层 30 │ ├── views/ # 页面视图 31 │ └── main.dart # 应用入口 32 ├── linux/ # Linux平台代码 33 ├── macos/ # macOS平台代码 34 ├── pubspec.yaml # 项目配置 35 └── analysis_options.yaml # 代码分析配置 36 ``` 37 38 ## 编码规范 39 40 ### 命名规范 41 - **文件命名**: 小写字母,使用下划线分隔,如 `auth_provider.dart` 42 - **类名**: 首字母大写,驼峰命名,如 `AuthProvider` 43 - **变量命名**: 首字母小写,驼峰命名,如 `userService` 44 - **常量命名**: 全大写,下划线分隔,如 `API_BASE_URL` 45 - **方法命名**: 首字母小写,驼峰命名,如 `loginUser` 46 - **私有成员**: 以下划线开头,如 `_privateVariable` 47 48 ### 代码风格 49 - 使用 2 空格缩进 50 - 每行不超过 80 个字符 51 - 方法体之间空一行 52 - 类成员之间空一行 53 - 注释清晰,说明方法功能和参数含义 54 - 遵循 Dart 官方风格指南 55 56 ## 核心规范 57 58 ### 1. 状态管理规范 59 - 使用 Provider 进行状态管理 60 - 按功能模块划分 Provider 61 - 状态定义应清晰,包含必要的类型注释 62 - 异步操作应使用 async/await 63 - 状态更新应通过 notifyListeners() 通知 64 65 ### 2. 路由规范 66 - 使用 Go Router 进行导航 67 - 路由配置应按模块组织 68 - 路由路径使用 kebab-case 69 - 路由守卫应统一管理 70 - 懒加载页面以优化性能 71 72 ### 3. 网络请求规范 73 - 使用 Dio 进行 HTTP 请求 74 - 配置统一的 baseURL 和拦截器 75 - 请求和响应数据应进行类型检查 76 - 错误处理应统一管理 77 - API 调用应封装在服务层 78 79 ### 4. 本地存储规范 80 - 使用 Hive 进行本地存储 81 - 数据模型应实现 HiveObject 82 - 类型适配器应正确注册 83 - 存储操作应封装在服务层 84 85 ### 5. UI 组件规范 86 - 遵循 Material Design 设计规范 87 - 组件应遵循单一职责原则 88 - 复杂组件应拆分为更小的子组件 89 - 响应式设计应考虑不同屏幕尺寸 90 - 主题配置应统一管理 91 92 ### 6. 表单处理规范 93 - 使用 Form Validator 进行表单验证 94 - 表单状态应通过 Provider 管理 95 - 错误信息应清晰显示 96 - 表单提交应使用异步操作 97 - 提交状态应提供视觉反馈 98 99 ### 7. 错误处理规范 100 - 全局错误处理应在 Dio 拦截器中实现 101 - 页面级错误应在组件中捕获并显示 102 - 错误信息应友好且具有指导性 103 - 关键操作应提供错误重试机制 104 105 ### 8. 性能优化规范 106 - 组件懒加载 107 - 图片优化 108 - 代码分割 109 - 缓存策略 110 - 避免不必要的重建 111 112 ## 开发流程 113 1. 需求分析与设计 114 2. 页面结构设计 115 3. 数据模型定义 116 4. 服务层实现 117 5. 状态管理实现 118 6. 路由配置 119 7. UI 组件开发 120 8. 测试与调试 121 9. 代码审查 122 10. 构建与部署 123 124 ## 最佳实践 125 - 遵循 Flutter 官方最佳实践 126 - 使用 null safety 127 - 组件复用与抽象 128 - 响应式设计 129 - 可访问性考虑 130 - 国际化支持 131 - 单元测试与集成测试 132 - 代码格式化与 linting 133 - 性能监控与优化
bage2014/study/tree/main/study-ai-myapp-fimaly/.trae/skills/mobile commit 9543d4aa6f
Frequently asked questions How do I install the Mobile skill? Run npx skillmds@latest add bage2014/mobile in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Mobile skill do? Flutter移动端项目规范 It is listed under Coding & Dev Tools on SkillMD.
Is Mobile safe to use? This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Mobile? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Mobile free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Mobile? bage2014 (@bage2014) published this skill. Their other Agent Skills are listed on their SkillMD profile.