← 回到首页
Flutter UI Demo
访问项目

技术栈

Flutter Dart GetX Material 3 SharedPreferences

Flutter UI Demo

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 调用 — 所有数据为演示目的而硬编码。

Logo Adib

© 2026 Adib

GitHub