🎨 视觉设计优化: - 金色主题:深色 #D4AF37 / 浅色 #F59E0B - 精致渐变效果(卡片、按钮、背景) - 立体阴影系统,增加视觉层次 - 统一圆角设计(16-24px) 💳 精致账户卡片: - 独立卡片设计,渐变图标容器 - 金色边框装饰,突出账户类型 - 清晰信息层级(标签→账户名→余额) 🔄 创新交互设计: - 多层圆形切换按钮(3层嵌套) - 流畅动画(平移+透明度) - 触觉反馈,提升交互体验 📝 优化金额输入: - 超大字号(36px) - 智能光晕效果 - 缩放动画反馈 - 实时余额提示 ✨ 胶囊式百分比按钮: - 渐变背景+金色边框 - 统一间距,视觉协调 🚀 高级确认按钮: - 动态状态(灰色/金色渐变) - 多层阴影,金色光晕 - 箭头图标装饰 🎬 丰富动画系统: - 账户切换动画 - 金额输入动画 - 聚焦光晕效果 - 余额平滑过渡 - ✅ 后端构建成功 (2.1s) - ✅ Flutter Web 构建成功 (23.5s) - ⚠️ Admin: TypeScript类型错误(已知问题) - 🎉 从太丑到惊艳的专业级设计!
Flutter Monisuo - 虚拟货币模拟交易平台
项目概述
Flutter 版本的模拟所 APP,支持 Android、iOS 平台。
项目结构
flutter_monisuo/
├── lib/
│ ├── main.dart # 应用入口
│ ├── core/ # 核心模块
│ │ ├── constants/ # 颜色、API端点常量
│ │ ├── theme/ # 主题配置
│ │ ├── network/ # Dio 网络封装
│ │ └── storage/ # SharedPreferences
│ ├── data/
│ │ ├── models/ # 数据模型
│ │ └── services/ # API 服务
│ ├── providers/ # 状态管理
│ └── ui/
│ ├── common/ # 公共组件
│ └── pages/ # 页面
│ ├── auth/ # 登录/注册
│ ├── home/ # 首页
│ ├── market/ # 行情
│ ├── trade/ # 交易
│ ├── asset/ # 资产
│ └── mine/ # 我的
├── assets/ # 资源文件
└── pubspec.yaml # 依赖配置
功能模块
用户模块
- 用户登录
- 用户注册
- 用户信息
- 退出登录
行情模块
- 币种列表
- 币种搜索
- 实时价格
交易模块
- 买入/卖出
- 交易记录
- 持仓管理
资产模块
- 资产总览
- 资金账户
- 交易账户
- 充值/提现/划转
技术栈
- Flutter 3.x
- Provider (状态管理)
- Dio (网络请求)
- SharedPreferences (本地存储)
运行项目
前置条件
- Flutter SDK 已安装
- Android Studio / VS Code
运行步骤
# 1. 进入项目目录
cd flutter_monisuo
# 2. 获取依赖
flutter pub get
# 3. 运行项目
flutter run
# 或者指定平台
flutter run -d android # Android
flutter run -d chrome # Chrome (Web)
API 配置
API 基础地址配置在 lib/core/constants/api_endpoints.dart:
static const String baseUrl = 'http://8.155.172.147:5010';
主题色
- 主色:
#00D4AA - 涨色:
#00C853 - 跌色:
#FF5252 - 背景:
#1A1A2E
作者
Monisuo Team