03. Flutter/Dart 基础速成

课时信息

📅 时间：9:50 - 10:35 🎯 目标：不背语法，用 AI 理解 Widget 树结构与状态管理

1. 忘掉语法，学会“看图说话”

在 AI 时代，你不需要背诵 Scaffold 或 Container 怎么写。你只需要学会把界面翻译成 Prompt。

AI 眼中的 UI

当你看到一个界面时，不要想代码，要想结构：

• 横着排 -> "用 Row 布局"
• 竖着排 -> "用 Column 布局"
• 叠在一起 -> "用 Stack 布局"

2. 实战：指挥 AI 捏组件

我们不做枯燥的语法练习，直接捏一个 "用户个人卡片"。

Step 1: 描述给 AI 听

在 Composer (Cursor/Trae) 中输入：

"帮我写一个 Flutter Widget，名字叫 UserProfileCard。 样式要求：

1. 这是一个圆角卡片，有白色背景和只有一点点阴影。
2. 内部布局是水平的 (Row)。
3. 左边是一个 60x60 的圆形头像 (用占位图)。
4. 右边是垂直布局 (Column)，包含粗体的用户名和灰色的简介。
5. 最右边放一个蓝色的'关注'按钮。"

Step 2: 粘贴与运行

AI 会给你一段完整的代码。你不需要读懂每一行，只需要：

1. 把代码复制到 lib/main.dart 的最下面。
2. 在主页面的 body 里调用它：body: Center(child: UserProfileCard())。
3. 保存，看模拟器。

Step 3: 让 AI 修改 (Refine)

觉得不好看？继续指挥：

"头像还是太小了，改成 80x80。另外给卡片加一点内边距。"

这就是 Vibecoding 的开发方式：描述 -> 生成 -> 调整。

3. 动态交互：只有这里需要动脑

如果你的界面需要动（比如点击关注后变色），你需要告诉 AI：

"这个 Widget 需要是动态的 (Stateful)。点击按钮后，按钮文字变成'已关注'，颜色变灰。"

AI 会自动处理 setState 那些繁琐的逻辑。你只需要确认交互结果对不对。