Flutter环境搭建及运行第一个flutter项目应用

最新推荐文章于 2025-08-25 17:08:45 发布

韶鹿先生

最新推荐文章于 2025-08-25 17:08:45 发布

阅读量872

点赞数 26

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/chaoxxggg/article/details/150697366

flutter 专栏收录该内容

22 篇文章

订阅专栏

这篇教程将带你从一台“干净”的电脑开始，一步步搭建完整的Flutter for Android开发环境，并在Android Studio中创建并运行你的第一个Flutter应用。

我们将这个过程分为六个主要部分，请严格按照顺序执行：

【准备工作】安装核心软件
【关键配置】设置环境变量
【IDE就绪】配置Android Studio
【验证环境】使用flutter doctor进行健康检查
【牛刀小试】创建并运行你的第一个Flutter项目
【常见问题】新手Q&A

准备工作：你的电脑需要什么？

操作系统: Windows 10/11 (64位)，macOS，或Linux。本教程以 Windows 11 为例，其他系统操作类似。
磁盘空间: 至少10 GB的可用空间（Flutter SDK、Android Studio、Android SDK、模拟器等会占用较多空间）。
内存 (RAM): 建议8 GB以上，16 GB更佳，否则在运行模拟器和编译时会很卡。

第一部分：【准备工作】安装核心软件

步骤 1: 安装 Java Development Kit (JDK)

虽然Android Studio自带了JDK，但为了确保命令行工具的兼容性和稳定性，我们手动安装一个。推荐使用OpenJDK。

下载: 访问 Adoptium OpenJDK 官方网站。
- 选择 Version: 17 (LTS) 或 11 (LTS)。
- 选择你的 Operating System 和 Architecture (x64)。
- 点击 "Latest release" 下载 .msi 安装包。
安装:
- 双击下载的 .msi 文件。
- 一路 "Next" (下一步)。
- 在 "Custom Setup" 界面，确保 "Set JAVA_HOME variable" 被设置为 "Will be installed on local hard drive" (通常是一个红叉图标，点击它选择该选项)。这一步非常重要，它会自动帮你配置好JAVA_HOME环境变量。
- 完成安装。

步骤 2: 下载 Flutter SDK

下载: 访问 Flutter官网SDK下载页面。
点击蓝色的 "flutter_windows_x.x.x-stable.zip" 按钮下载最新的稳定版SDK压缩包。
解压:
- 不要将它解压到需要管理员权限的目录，如 C:\Program Files\`。 * 在你的电脑上创建一个简单路径的文件夹，例如 C:\flutter 或者 D:\dev\flutter。 * 将下载的压缩包里的 flutter 文件夹整个解压到你创建的这个目录中。解压后，你的Flutter SDK路径应该是类似 C:\flutter`。

步骤 3: 安装 Android Studio

Android Studio是Google官方推荐的IDE，它集成了Android SDK、模拟器等所有你需要的东西。

下载: 访问 Android Studio官方下载页面。
点击 "Download Android Studio" 按钮，同意协议后下载。
安装:
- 双击下载的 .exe 文件。
- 一路 "Next"。
- 在 "Choose Components" 界面，确保 "Android Studio" 和 "Android Virtual Device" (安卓虚拟设备/模拟器) 都被勾选。
- 选择安装路径，可以使用默认值。
- 安装完成后，启动Android Studio。
首次启动向导:
- 第一次启动时，它会引导你进行一些基本设置。
- 选择 "Standard" (标准) 安装类型，它会自动下载最新的Android SDK、构建工具等。
- 选择你喜欢的主题（Darcula是暗色主题）。
- 点击 "Finish"，然后耐心等待它下载所有必需的组件。这个过程可能需要一些时间，取决于你的网络速度。

第二部分：【关键配置】设置环境变量

这一步是为了让你的电脑在任何位置都能识别 flutter 和 adb (Android调试工具) 等命令。

打开环境变量设置:
- 在Windows搜索框中输入“环境变量”。
- 点击“编辑系统环境变量”。
- 在弹出的窗口中，点击“环境变量...”按钮。
配置 Path 变量:
- 在“用户变量”或“系统变量”区域找到名为 Path 的变量（推荐配置在“用户变量”中），双击它。
- 在弹出的编辑窗口中，点击“新建”。
- 添加 Flutter SDK 的 bin 目录。根据你之前解压的位置，路径应该是 C:\flutter\bin (请替换成你的实际路径)。
- 点击“确定”保存。
配置 Android 环境变量 (非常重要):
- 找到Android SDK路径: 打开Android Studio，点击 File -> Settings -> Appearance & Behavior -> System Settings -> Android SDK。在顶部可以看到 "Android SDK Location" 的路径，例如 C:\Users\你的用户名\AppData\Local\Android\Sdk。复制这个路径。
- 回到刚才的“环境变量”窗口。
- 在“系统变量”区域（或“用户变量”），点击“新建”。
  - 变量名: ANDROID_HOME
  - 变量值: (粘贴你刚刚复制的Android SDK路径)
- 再次找到 Path 变量并双击编辑。
- 点击“新建”，添加以下三条路径（使用 %ANDROID_HOME% 可以自动引用你刚设置的路径）：
  - %ANDROID_HOME%\platform-tools
  - %ANDROID_HOME%\emulator
  - %ANDROID_HOME%\cmdline-tools\latest\bin (如果latest目录不存在，可能是tools目录，请根据实际情况调整)
验证配置:
- 关闭所有已经打开的命令行窗口(CMD或PowerShell)。
- 重新打开一个新的命令行窗口。
- 输入 flutter --version，如果能看到Flutter的版本信息，说明Flutter路径配置成功。
- 输入 adb --version，如果能看到Android Debug Bridge的版本信息，说明Android SDK路径配置成功。

第三部分：【IDE就绪】配置Android Studio

现在，我们需要让Android Studio认识Flutter。

安装Flutter和Dart插件:
- 打开 Android Studio。
- 在欢迎界面，选择 Plugins (插件)。或者如果已经打开了项目，选择 File -> Settings -> Plugins。
- 在插件市场的搜索框中输入 Flutter。
- 找到 Flutter 插件，点击 Install (安装)。
- 它会提示你，安装 Flutter 插件需要同时安装 Dart 插件，点击 Install 或 OK 同意。
- 安装完成后，点击 Restart IDE 重启Android Studio。
重启后，你会发现欢迎界面多了一个 "New Flutter Project" 的选项，这表示插件安装成功！

第四部分：【验证环境】使用`flutter doctor`进行健康检查

flutter doctor 是一个强大的诊断工具，它会检查你的环境是否完整。

打开一个新的命令行窗口 (CMD 或 PowerShell)。
运行命令:
```
flutter doctor
```
分析 flutter doctor 的输出:
- 它会逐项检查：Flutter SDK、Android toolchain、Chrome (用于Web开发)、Android Studio、连接的设备等。
- [√] (绿色对勾): 表示该项检查通过，没有问题。
- [!] (黄色感叹号): 表示有警告或需要进一步配置。
- [X] (红色叉号): 表示有错误，必须修复。
处理常见问题:
- [!] Android toolchain - develop for Android devices (Android SDK version X.X.X)
  - Android license status unknown.: 这是最常见的问题。根据提示，运行 flutter doctor --android-licenses。接下来，它会让你对一系列协议输入 y (yes) 并按回车，直到全部接受。
  - Cmdline-tools component is missing: 打开Android Studio -> File -> Settings -> ... -> Android SDK -> SDK Tools 标签页，勾选 Android SDK Command-line Tools (latest)，点击 "Apply" 安装。
- [!] Connected device • No devices available: 这很正常，因为我们还没连接设备或启动模拟器。
最终目标: 运行 flutter doctor 后，确保至少以下几项是 [√]：
- Flutter (Channel stable, ...)
- Android toolchain - develop for Android devices
- Android Studio (version ...)

第五部分：【牛刀小试】创建并运行你的第一个Flutter项目

步骤 1: 创建项目

打开Android Studio。
点击 "New Flutter Project"。
在左侧选择 "Flutter"。
确保 "Flutter SDK path" 指向你之前解压的路径 (如 C:\flutter)。如果为空，请手动指定。
点击 "Next"。
设置项目信息:
- Project name: my_first_app (只能用小写字母、数字和下划线)。
- Organization: 通常使用反向域名，如 com.example。这会决定你的Android应用包名 (package name)。
- 其他保持默认即可。
点击 "Create"。Android Studio会为你创建一个包含示例代码的Flutter项目。

步骤 2: 准备运行设备

你有两种选择：使用模拟器或使用真机。

选项A: 使用Android模拟器 (推荐新手)

在Android Studio的右上角，找到并点击 "Device Manager" (一个手机图标)。
点击 "Create Device"。
选择一个设备型号，比如 Pixel 6，点击 "Next"。
选择一个系统镜像 (System Image)，比如最新的稳定版 (如 Tiramisu, API 33)。如果旁边有 "Download" 链接，点击下载。下载完成后，选中它，点击 "Next"。
在最后一步，可以给模拟器起个名字，然后点击 "Finish"。
回到Device Manager列表，点击你刚创建的模拟器旁边的 ▶️ (启动) 按钮。等待模拟器完全启动并显示主屏幕。

选项B: 使用真实Android手机 (性能更好)

手机端操作:
- 打开 "设置" -> "关于手机"。
- 连续点击 "版本号" 7次，直到提示“您已处于开发者模式”。
- 返回 "设置"，找到 "开发者选项" (可能在"系统"或"其他设置"里)。
- 进入 "开发者选项"，打开 "USB调试" 开关。
电脑端操作:
- 用USB数据线将手机连接到电脑。
- 手机上会弹出一个窗口 "允许USB调试吗？"，勾选 "一律允许"，然后点击 "允许"。
- 大部分情况下Windows会自动安装驱动。如果不行，你需要去手机品牌的官网下载对应的USB驱动程序。

步骤 3: 运行应用！

回到Android Studio，看顶部的工具栏。
在设备选择下拉框中，你应该能看到你启动的模拟器或连接的真机。选中它。
点击旁边的绿色 ▶️ (Run 'main.dart') 按钮。
第一次运行会比较慢，因为它需要编译和打包。请耐心等待。
稍后，你会在你的设备上看到一个Flutter的官方示例应用：一个蓝色标题栏，中间有一个数字，右下角有一个“+”按钮。点击按钮，数字会增加。

恭喜！你已经成功从0到1搭建了Flutter开发环境，并运行了你的第一个Android应用！

第六部分：【常见问题】新手Q&A

Q: 为什么第一次编译这么慢？
A: 首次编译需要下载Gradle依赖、编译原生Android代码和Dart代码，所以会很慢。之后的增量构建（Hot Reload/Hot Restart）会非常快。
Q: 什么是Hot Reload (热重载)?
A: 在应用运行时，修改代码后，按 Ctrl + S 保存，或者点击闪电图标 (⚡️ Hot Reload)，应用界面会立刻更新，而不需要重新启动应用。这是Flutter开发的巨大优势。
Q: flutter doctor 总是提示某个组件有问题怎么办？
A: 仔细阅读 [!] 或 [X] 后面的英文提示，它通常会告诉你解决方案。比如，让你运行某个命令，或者在Android Studio里安装某个东西。99%的问题都能通过flutter doctor的提示解决。
Q: 我应该学习Dart语言吗？
A: 是的。Flutter是UI框架，Dart是其背后的编程语言。虽然可以直接上手改示例代码，但系统学习Dart的基础语法对于后续开发至关重要。