Flutter UI Demo 是一个以 UI 为核心的展示项目,展示了一个完全使用 Flutter 构建的家具电商商店。主要目标是演示高级 UI 技术、自定义动画和基于 GetX 的响应式状态管理 — 无任何后端集成。
主要功能:
- 英雄横幅: 自动轮播的促销横幅(3.5 秒间隔),带渐变背景、动画指示点和"立即购买"按钮。
- 3D 产品轮播: 自定义卡片堆叠轮播,带 Z 轴分层效果 — 中心卡片全尺寸,两侧卡片缩小并水平偏移。支持滑动和点击居中。
- 动画打字搜索: 循环显示提示短语的搜索栏,带闪烁光标打字效果、暂停和擦除动画。
- 类别筛选: 水平滚动的筛选标签(全部、沙发、椅子、桌子、灯具),带动画选中状态。
- 产品详情页: 完整底部表单,带动画星级评分、动画价格计数器、颜色选择器、数量选择器和添加到购物车功能。
- 收藏系统: 每个产品可切换收藏,通过 SharedPreferences 持久化。专用收藏页面带单个移除动画和全部清除交错飞出动画。
- 个人资料页: 用户信息、响应式统计卡片、设置开关和条件购物车提醒横幅。
- 自定义底部导航: 浮动药丸形导航栏,3 个标签页,带动画活跃指示器。
技术栈:
- 框架: Flutter 3.10+ (Dart)
- 状态管理: GetX(响应式可观察对象、依赖注入)
- 本地存储: SharedPreferences(收藏持久化)
- 主题: Material 3,琥珀色种子颜色
- 图片: 网络图片来自 picsum.photos 和 pravatar.cc
架构:
基于 GetX 的单控制器架构,所有状态在一个 AppController 中管理。UI 分为页面(主页、收藏、个人资料)和可复用组件。无后端、无 API 调用 — 所有数据为演示目的而硬编码。