3、创建第一个项目：flutter create命令、项目结构解析、运行到模拟器和真机

好，咱们正式开始动手了。

前面两章我们把环境搭好了，Flutter SDK 也装上了。现在要做的，就是创建第一个项目，然后把它跑起来。这一步其实很简单，但很多人会忽略项目结构里的门道。我见过不少新手，项目能跑，但连 lib 目录是干嘛的都不清楚。嗯，咱们不能这样。

3.1 使用 flutter create 命令

打开你的终端（Windows 用 PowerShell 或 CMD，macOS 用 Terminal），找个你喜欢的目录。我个人习惯把所有 Flutter 项目放在 ~/flutter_projects 下，方便管理。

然后执行这条命令：

flutter create my_first_app

你会看到终端里刷刷刷地输出一堆日志。最后出现 All done! 就说明创建成功了。

小技巧： 项目名不要用大写字母，也不要用中文。Flutter 要求项目名是小写字母加下划线。比如 my_first_app 就很好。如果你用了大写，命令会报错。

创建完成后，进入项目目录看看：

cd my_first_app
code .

如果你装了 VS Code，code . 会直接打开当前目录。我个人觉得这样最顺手。

3.2 项目结构解析

好，现在你看到了一堆文件和文件夹。别慌，咱们一个一个说。

目录/文件 作用
lib/ 核心代码目录。你写的 Dart 代码基本都放这里。
test/ 测试代码目录。写单元测试、Widget 测试的地方。
android/ Android 原生工程。一般不用动，除非你要改原生配置。
ios/ iOS 原生工程。同理，很少手动改。
web/ Web 平台相关文件。如果你要编译成 Web 应用，这里会用到。
pubspec.yaml 项目的配置文件。依赖管理、资源声明都在这里。
analysis_options.yaml 代码分析规则配置。可以自定义 lint 规则。

重点说说 lib/ 目录。打开 lib/main.dart，你会看到 Flutter 自动生成的示例代码。这段代码就是一个最简单的计数器应用。我刚开始学 Flutter 时，就是从这个文件开始一点点拆解的。

你想想看，整个 Flutter 应用的入口就是 main() 函数。它调用了 runApp()，传入一个 Widget。没错，Flutter 里一切皆 Widget。这个理念贯穿始终。

核心概念： Flutter 应用本质上是一棵 Widget 树。从根 Widget 开始，层层嵌套，构建出整个界面。

再看 pubspec.yaml。这个文件很重要。它声明了项目名称、版本、依赖的包、字体、图片资源等。举个例子，如果你想用第三方库，比如网络请求库 dio，就在 dependencies 下面加一行：

dependencies:
  flutter:
    sdk: flutter
  dio: ^5.0.0

然后执行 flutter pub get，依赖就下载好了。我在项目中遇到过好几次因为忘记执行 flutter pub get 导致编译失败的情况。嗯，这个坑踩过一次就不会忘了。

3.3 运行到模拟器

代码有了，项目结构也清楚了。接下来就是把它跑起来。

首先，你得有一个模拟器。Android 用 Android Studio 自带的 AVD Manager 创建，iOS 用 Xcode 自带的 Simulator。我个人建议两个平台都配好，因为开发中经常需要双端验证。

启动模拟器后，在终端里执行：

flutter run

Flutter 会自动检测连接的设备。如果只有一个模拟器在运行，它会直接安装并启动应用。如果有多个设备，它会让你选择。

你会看到终端里输出类似这样的日志：

Launching lib/main.dart on iPhone 15 Pro in debug mode...
Running Xcode build...
Installing...
Syncing files to device iPhone 15 Pro...
Flutter run key commands.
h - Repeat this help message.
c - Clear the screen.
q - Quit (terminate the application on the device).
...

等几秒钟，模拟器上就会出现你的第一个 Flutter 应用。一个带加号按钮的计数器。点一下加号，数字会加 1。这就是热重载的效果。

热重载： 修改代码后，按 r 键（不是 R），应用会立即更新，不需要重新编译。这是 Flutter 开发效率高的核心原因之一。我平时开发时，几乎每改几行代码就按一次 r，实时看效果。

3.4 运行到真机

模拟器跑通了，但真机才是最终战场。我建议你尽早用真机测试，因为模拟器在某些场景下表现和真机不一样，比如性能、传感器、推送等。

Android 真机：

  1. 打开手机的「开发者选项」和「USB 调试」。
  2. 用数据线连上电脑。
  3. 终端执行 flutter devices，确认设备被识别。
  4. 执行 flutter run，选择你的真机。

iOS 真机：

  1. 需要有一个 Apple 开发者账号（免费账号也可以）。
  2. 在 Xcode 中打开 ios/Runner.xcworkspace。
  3. 在 Signing & Capabilities 里选择你的 Team。
  4. 用数据线连上 iPhone，信任电脑。
  5. 执行 flutter run。
注意： iOS 真机调试第一次会比较慢，因为要处理签名和证书。我曾经因为证书过期折腾了半小时，后来发现只要在 Xcode 里重新勾选一下 Team 就好了。如果你遇到类似问题，别慌，先检查证书。

3.5 避坑指南

最后，分享几个我踩过的坑：

  • 端口冲突： 如果你同时开了多个 Flutter 调试实例，可能会遇到端口被占用的情况。关掉不需要的终端窗口就好。
  • 模拟器卡死： 偶尔模拟器会无响应。重启模拟器或者执行 flutter clean 清理构建缓存。
  • 真机连不上： 检查数据线是否支持数据传输（有些线只能充电）。另外，Windows 上需要安装手机厂商的 USB 驱动。

好了，到这里你已经成功创建并运行了第一个 Flutter 项目。虽然只是一个计数器，但背后的项目结构、运行机制、热重载这些概念，都是后续开发的基础。下一章我们会深入 Widget，开始真正构建界面。

公众号:蓝海资料掘金营，微信deep3321

← 上一章 📖 返回目录 下一章 →