一、我们要做什么？
在官方教程中，最终要构建一个叫做「Birdle」的小游戏应用（类似于大家熟悉的 Wordle 猜词游戏）。不过今天这一课的重点不是完成整个游戏，而是迈出第一步：创建一个能运行的 Flutter 项目，并理解它的基本结构。
二、创建新项目
2.1 打开终端
在 VS Code 中，按 Ctrl + `（键盘左上角的反引号键）打开终端。终端就是一个可以输入命令的窗口，你可以把它想象成"跟电脑对话的聊天框"。
2.2 运行创建命令
在终端中输入以下命令：
flutter create birdle --empty
这行命令做了什么呢？
flutter create：告诉 Flutter "我要创建一个新项目"。birdle：项目的名字，你可以换成任何你喜欢的名字（注意：只能用小写字母和下划线，比如my_app）。--empty：使用最简洁的模板，生成的代码最少，最适合学习。
命令执行完毕后，Flutter 会自动帮你创建好整个项目的文件夹结构。
2.3 进入项目目录
cd birdle
这行命令的意思是"进入 birdle 这个文件夹"。后续所有操作都需要在项目目录下执行。
三、看懂你的第一份 Flutter 代码
用 VS Code 打开项目中的 lib/main.dart 文件。这是整个应用的入口文件，所有 Flutter 应用都从这里开始运行。
别被代码吓到，我们一段一段来看。
3.1 导入和入口函数
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
这几行代码的含义：
import：导入 Flutter 的 Material 组件库。你可以理解为"从工具箱里取出工具"。Material 是 Google 设计的一套 UI 风格，提供了大量现成的按钮、文字、布局等组件。main()函数：这是每个 Dart 程序的起点，就像一本书的第一页。程序启动后，电脑会第一时间找到这个函数并执行它。runApp()：Flutter 提供的方法，作用是"把一个组件渲染到屏幕上"。它接收一个 Widget（组件）作为参数，这个组件就是整个应用的"根"。
3.2 MainApp 组件
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Text('Hello World!'),
),
),
);
}
}
这段代码定义了一个叫 MainApp 的组件。让我们逐层拆解：
StatelessWidget：无状态组件。意思是这个组件一旦构建好，内容就不会变化。后面你还会学到StatefulWidget（有状态组件），它可以响应用户操作而更新界面。build()方法：每个组件都必须有的方法，它告诉 Flutter "这个组件长什么样"。MaterialApp：应用的最外层包装，提供了 Material Design 风格的基础配置。Scaffold：脚手架，提供了页面的基本布局结构（比如顶部导航栏、底部栏、内容区域等）。Center：让子组件居中显示。Text('Hello World!')：显示一段文字。
3.3 理解 Widget 树
如果把这些组件的嵌套关系画出来，就像一棵倒着的树：
MainApp
└── MaterialApp
└── Scaffold
└── Center
└── Text('Hello World!')
这就是 Flutter 中非常核心的概念——Widget 树（组件树）。在 Flutter 的世界里，一切皆 Widget。按钮是 Widget，文字是 Widget，布局也是 Widget。你的工作就是像搭积木一样，把这些 Widget 组合起来，构建出漂亮的界面。
四、运行你的应用
4.1 启动应用
在终端中输入：
flutter run -d chrome
这行命令的意思是"用 Chrome 浏览器运行这个 Flutter 应用"。第一次运行可能需要一点时间来编译，请耐心等待。
运行成功后，Chrome 浏览器会自动打开，你将看到屏幕中央显示着"Hello World!"。
💡 小贴士： 如果你想用其他方式运行，也可以在 VS Code 中直接按
F5，或者点击右上角的运行按钮。
4.2 可能遇到的问题
如果运行失败，可以先检查以下几点：
- 确认你已经进入了项目目录（
cd birdle）。 - 确认 Flutter 已正确安装（运行
flutter doctor检查）。 - 确认 Chrome 浏览器已安装。
五、体验热重载（Hot Reload）
这是 Flutter 最受开发者欢迎的功能。传统开发中，改一行代码就要重新编译整个项目，等上几十秒甚至几分钟。Flutter 的热重载能在一秒内把修改反映到屏幕上，而且不会丢失当前的应用状态。
5.1 动手试试
- 保持应用运行状态，打开
lib/main.dart。 - 找到
Text('Hello World!')这一行。 - 把
Hello World!改成任意你想要的文字，比如你好，Flutter！。 - 在运行应用的终端中按下
r键。
看！屏幕上的文字瞬间就变了，不需要重新启动应用。
5.2 为什么热重载这么重要？
想象一下，你正在调试一个需要先登录、再进入某个页面才能看到的界面。如果没有热重载，每次改代码都要从头走一遍登录流程。有了热重载，你只需按一下 r，修改后的界面就立刻呈现，之前的登录状态完全保留。这大大提升了开发效率。
六、本节知识点小结
经过这一课，你已经掌握了以下内容：
创建项目： 使用 flutter create 命令加上 --empty 参数，可以快速生成一个最简洁的 Flutter 项目结构。
理解代码结构： Flutter 应用从 main() 函数开始，通过 runApp() 将根组件渲染到屏幕上。每个组件都有一个 build() 方法来描述界面。
Widget 树： Flutter 的界面是由一层层嵌套的 Widget 组成的树状结构。你的任务就是组合这些 Widget 来构建 UI。
运行和热重载： 使用 flutter run 启动应用，按 r 触发热重载，可以在不到一秒内看到代码修改的效果。
七、下一步学习
恭喜你成功创建并运行了第一个 Flutter 应用！接下来，官方教程会带你学习 Widget 基础（Widget Fundamentals），深入了解更多类型的组件以及它们的用法。
我们下篇文章见！
