Flutter + FastAPI 30天速成计划

2025-11-26开始目前第1天

背景

我有一个想法，想要在工作之余学习Flutter和FastAPI，计划在30天内完成。我咨询了刚发布的gemini3，它给出了如下教程，我现在要测试一下是否可行。

我的问题：

我要在一个月内学习好Flutter和FastAPI，而且我有正常的工作，要在工作之余进行学习，我有一个服务器，用他们开发出来一个网站，这个网站当做一个叫做flutter+fastapi教程网站，教别人在一个月内学习完成。给我具体的时间路径，我目前对flutter和fastapi都不熟悉。给我具体的可落地的方法，去点那些冗余的内容，让我在一个月内开发出来一个网站并且将我学到的方法做出来一个网站，这个网站就是教别人在一个月内学习好flutter+fastapi。

gemini3的答案

这是一个非常有挑战性但也非常切实可行的目标。要在30天内，在职工作之余，从零掌握 Flutter (前端) 和 FastAPI (后端) 并上线一个完整的教学网站，你必须采取**“极简主义"和"以终为始”**的策略。

传统的"先看视频，再看书，再敲代码"的模式绝对来不及。你必须采用**“在此刻需要什么，就只学什么”**的JIT (Just-In-Time) 学习法。

核心策略：去冗余（不做无用功）

在30天内，你绝对不要学以下内容（虽然它们很有用，但现在是干扰项）：

• ❌ Flutter: 复杂的动画、原生的Android/iOS调用、复杂的状体管理（如Bloc，只学最简单的Provider或Riverpod）、单元测试。
• ❌ FastAPI: 复杂的微服务架构、Redis缓存、Celery异步任务、复杂的权限管理、GraphQL。
• ❌ 数据库: PostgreSQL/MySQL安装配置（直接用SQLite，它是文件型数据库，无需配置，Python原生支持，足够支撑初期网站）。
• ❌ UI设计: 不要自己画图，直接用Flutter自带的Material Design组件。

技术架构（你的目标产物）

• 前端 (Flutter Web): 编译成网页版（HTML/JS/WASM）。
• 后端 (FastAPI): 提供JSON数据接口。
• 数据库 (SQLite): 存储教程文章内容。
• 部署 (Docker + Nginx): 在你的服务器上运行。

30天时间路径规划

假设你周一至周五每晚有 2-3小时，周末每天有 6-8小时。

第1周：后端基础与数据核心 (FastAPI)

目标： 跑通后端，能通过API吐出数据。

Day 1 (环境与Hello World):

• 安装 Python 3.10+, VS Code。
• 安装库：pip install fastapi uvicorn。
• 任务：写出第一个 main.py，运行起来，在浏览器看到 {"message": "Hello World"}。
• 学习点：GET请求，路径操作符。

Day 2 (数据模型):

• 安装 pydantic。学习如何定义数据格式。
• 任务：定义一个 Article 模型（包含 id, title, content）。
• 学习点：Pydantic Model。

Day 3 (数据库 - 极简版):

• 安装 sqlmodel (FastAPI作者开发的库，结合了SQLAlchemy和Pydantic)。
• 任务：创建 database.py，代码自动生成一个 tutorial.db 文件。

Day 4 (CRUD 增删改查):

• 任务：写两个API：
  1. POST /articles/ (你用来上传教程)
  2. GET /articles/ (前端用来获取教程列表)
• 学习点：依赖注入 (Depends), Session。

Day 5 (Markdown与CORS):

• 你的教程是文字，要支持Markdown格式存储。
• 配置 CORS (跨域资源共享)，否则Flutter网页访问不了后端。
• 任务：用 Postman 或 Swagger UI (FastAPI自带文档) 测试存入一篇Markdown文章。

周末 Day 6-7 (后端完结):

• 集中攻坚：完善后端结构。
• 写一个简单的Python脚本，把你这一周学到的笔记整理成Markdown，通过API批量导入到数据库中。
• 成果：后端接口已就绪，等待前端调用。

第2周：前端基础与页面构建 (Flutter)

目标： 能够画出网页界面，不求美观，但求可用。

Day 8 (环境与Hello World):

• 安装 Flutter SDK。运行 flutter doctor 确保环境OK。
• 任务：flutter create my_tutorial_site，运行起来看到计数器Demo。
• 学习点：Widget树的概念。

Day 9 (Dart基础与布局):

• 不要系统学Dart，只看变量、函数、类。
• 任务：修改Demo，把屏幕分成左边（菜单）、右边（内容）。
• 学习点：Row, Column, Container, ListView。

Day 10 (组件化):

• 任务：制作一个"文章卡片"组件，显示标题和简介。
• 学习点：StatelessWidget vs StatefulWidget。

Day 11 (网络请求):

• 引入 dio 或 http 包。
• 任务：让Flutter去请求你第一周写的 GET /articles/ 接口，把数据打印在控制台。
• 学习点：Future, async/await。

Day 12 (数据渲染):

• 任务：把API获取的数据显示在 ListView 列表里。
• 学习点：FutureBuilder (这很重要，专门处理异步数据渲染)。

周末 Day 13-14 (前端攻坚):

• 引入 flutter_markdown 包。
• 任务：实现点击列表中的文章，右侧显示完整的Markdown渲染内容。
• 成果：一个简陋但能跑的动态网站雏形。

第3周：全栈联调与内容填充

目标： 把笔记变成产品，实现"教别人"的功能。

Day 15-17 (路由与美化):

• 引入 go_router (管理网页URL，比如 /article/1)。
• 美化UI：给AppBar加颜色，给卡片加阴影。
• 关键任务：将你前两周的学习笔记整理好，作为网站的第一批内容。

Day 18-19 (用户体验):

• 增加"加载中"的转圈圈动画。
• 处理网络错误（比如后端挂了，前端显示什么）。

周末 Day 20-21 (内容生产 - 核心环节):

• 这是你网站的核心卖点：你的网站内容就是"如何在30天内做成这个网站"。
• 你现在的每一行代码，都是教程的素材。
• 任务：将你的代码上传GitHub，并在数据库里写好对应的教程文章，解释这些代码。

第4周：部署与上线 (落地)

目标： 让全世界能访问。

Day 22-23 (Docker化):

• 不要在服务器上手动装环境，会死人。学写 Dockerfile。
• 后端：基于 python:3.9-slim 镜像。
• 前端：运行 flutter build web，生成静态文件 (html/css/js)。

Day 24-25 (Nginx与服务器):

• 在服务器安装 Docker 和 Docker Compose。
• 编写 docker-compose.yml：
  1. 服务A (FastAPI): 端口 8000
  2. 服务B (Nginx): 端口 80，挂载Flutter生成的静态文件，并设置反向代理 /api 到服务A。

Day 26-27 (域名与HTTPS):

• 解析域名到服务器IP。
• 用 certbot 申请免费的HTTPS证书（这一步可以问ChatGPT具体的命令）。

周末 Day 28-30 (最终测试与发布):

• 全流程测试。
• 发布：在V2EX、掘金、Twitter等平台发布你的网站：“我用30天边学边做了一个教你30天学会Flutter+FastAPI的网站”。

关键落地方法（如何保证不弃坑）

1. Copilot / ChatGPT 辅助编程：

   • 不要手写所有代码。
   • Prompt技巧：不要问"怎么学Flutter"，要问"给我一个Flutter Web的左侧导航栏右侧内容区的布局代码，使用Material Design"。
   • 复制 -> 运行 -> 报错 -> 把报错扔回给AI -> 修正 -> 理解代码。这是最快的路径。

2. 利用"费曼学习法"：

   • 当你卡在"FastAPI如何处理跨域"这个问题时，解决它，然后立刻把它写成一篇教程文章存到你的数据库里。
   • 你的学习过程，就是你网站的内容填充过程。

3. 极简数据库设计 (Schema):

   • 不要搞用户登录注册（第一版）。任何人都可以看教程。
   • 你自己如何管理内容？
     • 方法A (极简): 直接操作服务器上的 SQLite 文件。
     • 方法B (进阶): 可以在代码里硬编码一个"超级密码"，只有带这个密码的POST请求才能写入文章。

4. 遇到困难怎么办？

   • 如果是样式问题（CSS/布局），跳过，丑一点没关系。
   • 如果是逻辑问题，问AI。
   • 如果是环境问题，用Docker解决。

这一套方案的价值

你不是在"学完再做"，而是在**“做一个教别人学习的产品的过程中，顺便学会了技术”**。

到第30天，你将拥有：

1. 一个上线的网站。
2. 一套完整的Flutter + FastAPI 代码库（可作为作品集）。
3. 一套自己亲手写的教程文档。
4. 真正的全栈开发能力。

现在，今晚回家，第一件事：安装 VS Code 和 Docker。开始吧。