# flutter-chinese-learning-demo **Repository Path**: thiswind/flutter-chinese-learning-demo ## Basic Information - **Project Name**: flutter-chinese-learning-demo - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-29 - **Last Updated**: 2026-03-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 中文学习 Demo · Flutter 以下截图为 **移动端视口预览**（与 Chrome 开发者工具「设备工具栏」等效的窄竖屏 + DPR，由 Playwright 按 iPhone 类预设自动截取；Flutter Web 为 CanvasKit 渲染）。

首页	学习 · 聆听	学习 · 解释
学习 · 发音	学习 · 成绩	进度

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE) **Gitee 仓库**：[https://gitee.com/thiswind/flutter-chinese-learning-demo](https://gitee.com/thiswind/flutter-chinese-learning-demo)（默认分支 **`master`**）基于 [Figma Make](https://www.figma.com/make/p8vUotMEFXH3VnMorGS4e9/Flutter%E8%AF%AD%E8%A8%80%E5%AD%A6%E4%B9%A0%E5%BA%94%E7%94%A8) 原型实现的 **演示项目**：用 **Flutter** 复刻「选等级 → 学习流（聆听 / 解释 / 发音 / 成绩）→ 进度与成就」的界面与导航。**不用于生产**，语音与 AI 评分为占位逻辑，适合作为 **Cupertino + Web + 主题配色** 的参考示例。 > `pubspec.yaml` 包名为 `chinese_learning`，与 Gitee 仓库名 `flutter-chinese-learning-demo` 不同属正常情况。 --- ## 功能概览 | 模块 | 说明 | |------|------| | 首页 | 渐变头图、完成数 / 平均分、`CupertinoListSection` 等级列表、「学习方式」说明 | | 学习 | 四阶段 UI；「模拟完成」生成随机分数；综合分计算无 stale 问题 | | 进度 | 统计、当前等级进度条、成绩档位、成就列表（`CupertinoListSection`） | | 主题 | **Cupertino** 控件 + **Catppuccin**（浅色 Latte / 深色 Mocha，随系统亮度切换） | | Web 开发 | 支持 `web-server`，无需本机安装 Chrome，默认浏览器打开即可 | --- ## 技术栈 - Flutter（Dart 3.10+，以你本机 `flutter --version` 为准） - `cupertino_icons` - [catppuccin_flutter](https://github.com/catppuccin/flutter)（配色） - 目标平台：当前仓库仅启用 **Web**（`flutter create --platforms=web`） --- ## 环境要求 - 已安装 [Flutter SDK](https://docs.flutter.dev/get-started/install)（stable 渠道） - 执行 `flutter doctor` 确认 Web 已启用：`flutter config --enable-web`（若尚未开启） --- ## 快速开始 ```bash git clone https://gitee.com/thiswind/flutter-chinese-learning-demo.git cd flutter-chinese-learning-demo flutter pub get ``` ### 使用内置 Web 服务（不依赖 Chrome） ```bash flutter run -d web-server --web-hostname localhost --web-port 8080 ``` 终端出现 `lib/main.dart is being served at http://localhost:8080` 后，用系统**默认浏览器**打开该地址。局域网调试可将 `--web-hostname` 改为 `0.0.0.0`，再用本机 IP 访问。 ### 分析与测试 ```bash flutter analyze flutter test ``` ### 重新生成 README 配图（Playwright）需本机 **Node.js 18+**、**Google Chrome**（或 Playwright 已下载的 Chromium），以及 **Flutter** 可执行 `flutter run -d web-server`。 ```bash npm install npx playwright install chromium ./scripts/run-screenshots.sh ``` 脚本会后台启动 `flutter run -d web-server`（默认 `http://localhost:8080`），待页面就绪后依次截取 6 张 PNG 到 `docs/screenshots/`。若服务已在运行，也可单独执行 `npm run screenshots`（环境变量 `BASE_URL` 可覆盖地址）。 --- ## 项目结构（节选） ``` lib/ ├── main.dart # CupertinoApp、路由状态、系统深浅色监听 ├── data/ │ └── learning_content.dart # 各等级词条数据 ├── models/ # Level、LearningItem、UserProgress ├── theme/ │ └── app_catppuccin.dart # Catppuccin ↔ CupertinoTheme ├── screens/ # 首页、学习流、进度 └── widgets/ └── app_progress_bar.dart # 无 Material 的条形进度条 ``` --- ## 设计稿与差异说明 - 原型为 Figma Make 导出的 **React + Tailwind** 页面；本仓库用 **Cupertino + Catppuccin** 在信息架构与文案上对齐，视觉为 iOS 列表风 + 柔和配色，**非像素级还原**。 - 语音朗读、语音识别、真实 AI 评分：**未实现**，按钮与文案中已标注占位说明。 --- ## 开源协议本项目以 [MIT License](LICENSE) 开源。你可以自由使用、修改和分发，**不承担任何担保责任**。在 Gitee 创建仓库时请勾选 **「公开」** 以符合开源展示；若需企业合规，请自行补充贡献指南与行为准则。 --- ## 致谢 - 设计原型：[Figma Make · Flutter 语言学习应用](https://www.figma.com/make/p8vUotMEFXH3VnMorGS4e9/Flutter%E8%AF%AD%E8%A8%80%E5%AD%A6%E4%B9%A0%E5%BA%94%E7%94%A8) - 配色：[Catppuccin](https://github.com/catppuccin/catppuccin) / [catppuccin_flutter](https://github.com/catppuccin/flutter) --- ## 仓库与分支说明 - 远程默认分支为 **`master`**。若你本地习惯使用 **`main`**，可保持本地 `main` 与远程同步： ```bash git push -u origin main:master ``` - SSH 克隆：`git@gitee.com:thiswind/flutter-chinese-learning-demo.git` 建议在 Gitee 仓库 **「管理 → 仓库设置」** 中填写**仓库描述**（例如：`Flutter 演示：中文学习 UI，Cupertino + Catppuccin，Web`），便于在「探索」里被检索到。