快速启动
匿名 · 更新于 2025/10/29
设置并测试 Flutter
了解如何使用任何基于 OSS 的编辑器（例如 VS Code）来设置您的 Flutter 开发环境并试用 Flutter 的开发者体验。
如果您之前使用过 Flutter 进行开发，或者您更喜欢使用其他编辑器或 IDE，则可以按照自定义设置说明进行操作。
确认您的开发平台
本页上的说明涵盖了在macOS设备上安装和试用 Flutter。
如果您想按照不同操作系统的说明进行操作，请选择以下选项之一。
Windows
macOS
Linux
ChromeOS
下载必备软件
为了最顺利地设置 Flutter，请首先安装以下工具。
-
安装 git
<p><strong>如果您已经安装了 git，请跳至下一步：下载并安装 Visual Studio Code。</strong></p> <p>在 Mac 上安装 Git 的方法有很多，但我们推荐使用 XCode。当你的构建目标是 iOS 或 macOS 时，这一点非常重要。</p> <div class="code-block"> <div class="code-block-body"> <pre class="opal" tabindex="0"> <code><span class="line">$ xcode-select --install</span></code> </pre> </div> </div> <p>如果您尚未安装这些工具，则会打开一个对话框，确认您是否要安装它们。点击<strong>"安装"</strong>，安装完成后，点击<strong>"完成"</strong>。</p> </li> <li> <h3>下载并安装 Visual Studio Code</h3> <p>要快速安装 Flutter，然后编辑和调试您的应用程序，<a href="https://code.visualstudio.com/docs/setup/setup-overview">请安装并设置 Visual Studio Code</a>。</p> <p>您可以安装并使用任何其他支持 VS Code 扩展的基于 Code OSS 的编辑器。如果您选择这样做，在本文的其余部分，我们将假定 VS Code 指的是您选择的编辑器。</p> </li>
安装并设置 Flutter
现在您已经安装了 Git 和 VS Code，请按照以下步骤使用 VS Code 安装和设置 Flutter。
-
启动 VS Code
<p>如果尚未打开，请使用 Spotlight 搜索 VS Code 或从安装目录手动打开它。</p> </li> <li> <h3>将 Flutter 扩展添加到 VS Code</h3> <p>要将 Dart 和 Flutter 扩展添加到 VS Code，请访问<a href="https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter">Flutter 扩展的市场页面</a>，然后点击<strong>"安装"</strong>。如果浏览器出现提示，请允许它打开 VS Code。</p> </li> <li> <h3>使用 VS Code 安装 Flutter</h3> <ol> <li> <p>在 VS Code 中打开命令面板。</p> <p>转到<strong>视图</strong> > <strong>命令面板</strong>或按<kbd class="special-key">Command</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>。</p> </li> <li> <p>在命令面板中，输入<code>flutter</code>。</p> </li> <li> <p>选择<strong>Flutter: New Project</strong>。</p> </li> <li> <p>VS Code 会提示你在计算机上找到 Flutter SDK。选择<strong>"下载 SDK"</strong>。</p> </li> <li> <p>当显示<strong>"选择 Flutter SDK 文件夹"</strong>对话框时，选择要安装 Flutter 的位置。</p> </li> <li> <p>单击<strong>"克隆 Flutter"</strong>。</p> <p>下载 Flutter 时，VS Code 会显示此弹出通知：</p> <div class="code-block"> <div class="code-block-body"> <pre class="opal" tabindex="0"> <code><span class="line">Downloading the Flutter SDK. This may take a few minutes.</span></code> </pre> </div> </div> <p>下载需要几分钟时间。如果您怀疑下载已挂起，请点击<strong>"取消"</strong>，然后重新开始安装。</p> </li> <li> <p>单击<strong>"将 SDK 添加到 PATH"</strong>。</p> <p>成功后，将显示通知：</p> <div class="code-block"> <div class="code-block-body"> <pre class="opal" tabindex="0"> <code><span class="line">The Flutter SDK was added to your PATH</span></code> </pre> </div> </div> </li> <li> <p>VS Code 可能会显示 Google Analytics 通知。</p> <p>如果您同意，请单击<strong>"确定"</strong>。</p> </li> <li> <p>为确保 Flutter 在所有终端中可用：</p> <ol type="a"> <li>关闭，然后重新打开所有终端窗口。</li> <li>重新启动 VS Code。</li> </ol> </li> </ol> </li> <li> <h3>解决安装问题</h3> <p>如果您在安装过程中遇到任何问题，请查看<a href="https://docs.flutter.dev/install/troubleshoot">Flutter 安装故障排除</a>。</p> </li>
试用 Flutter
现在您已经设置了 VS Code 和 Flutter，是时候创建一个应用程序并尝试 Flutter 开发了！
-
创建新的 Flutter 应用
<ol> <li> <p>在 VS Code 中打开命令面板。</p> <p>转到<strong>视图</strong> > <strong>命令面板</strong>或按<kbd class="special-key">Command</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>。</p> </li> <li> <p>在命令面板中，开始输入<code>flutter:</code>。</p> <p>VS Code 应该显示来自 Flutter 插件的命令。</p> </li> <li> <p>选择<strong>Flutter：新建项目</strong>命令。</p> <p>您的操作系统或 VS Code 可能会要求访问您的文档，同意后继续下一步。</p> </li> <li> <p>选择<strong>应用程序</strong>模板。</p> <p>VS Code 应该会提示你选择<strong>哪个 Flutter 模板？</strong>选择<strong>"应用程序"</strong>来启动一个简单的计数器应用程序。</p> </li> <li> <p>创建或选择新应用程序文件夹的父目录。</p> <p>应该会出现一个文件对话框。</p> <ol> <li>选择或创建您想要创建项目的父目录。</li> <li>要确认您的选择，请单击<strong>"选择要在其中创建项目的文件夹"</strong>。</li> </ol> </li> <li> <p>输入您的应用程序的名称。</p> <p>VS Code 会提示您输入新应用的名称。输入<code>trying_flutter</code>或类似的<code>lowercase_with_underscores</code>名称。按 <kbd>Enter</kbd> 确认选择。</p> </li> <li> <p>等待项目初始化完成。</p> <p>任务进度通常以通知的形式显示在右下角，也可以从<strong>输出</strong>面板访问。</p> </li> <li> <p>打开<code>lib</code>目录，然后打开<code>main.dart</code>文件。</p> <p>如果您对代码的每个部分的作用感到好奇，请查看整个文件中前面的注释。</p> </li> </ol> </li> <li> <h3>在 Web 上运行您的应用</h3> <p>虽然 Flutter 应用程序可以在许多平台上运行，但请尝试在 Web 上运行您的新应用程序。</p> <ol> <li> <p>在 VS Code 中打开命令面板。</p> <p>转到<strong>视图</strong> > <strong>命令面板</strong>或按<kbd class="special-key">Command</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>。</p> </li> <li> <p>在命令面板中，开始输入<code>flutter:</code>。</p> <p>VS Code 应该显示来自 Flutter 插件的命令。</p> </li> <li> <p>选择<strong>Flutter：选择设备</strong>命令。</p> </li> <li> <p>从<strong>"选择设备"</strong>提示中，选择<strong>Chrome</strong>。</p> </li> <li> <p>运行或开始调试您的应用程序。</p> <p>转到<strong>"运行"</strong> > <strong>"开始调试"</strong>或按<kbd>F5</kbd>。</p> <p><code>flutter run</code>用于构建和启动您的应用程序，然后应该会打开一个新的 Chrome 实例并开始运行您新创建的应用程序。</p> </li> </ol> </li> <li> <h3>尝试热重载</h3> <p><strong>Flutter 通过有状态热重载</strong>提供了快速的开发周期，能够重新加载正在运行的应用程序的代码，而无需重新启动或丢失应用程序状态。</p> <p>您可以更改应用程序的源代码，在 VS Code 中运行热重载命令，然后在正在运行的应用程序中查看更改。</p> <ol> <li> <p>在正在运行的应用程序中，尝试通过单击按钮将计数器添加几次 <img alt="增量 (+)" class="text-icon" src="https://docs.flutter.dev/assets/images/docs/get-started/increment-button.png" />。</p> </li> <li> <p>在您的应用程序仍在运行时，对文件进行更改<code>lib/main.dart</code>。</p> <p>修改方法<code>_incrementCounter</code>中的那行代码<code>_counter++</code>，改为递减该<code>_counter</code>字段的值。</p> <div class="code-block"> <div class="code-block-body"> <pre class="opal" tabindex="0"> <code> <span class="line"><span>setState(() {</span></span> <span class="line"><span> // ...</span></span> <span class="line removed-line"><span> _counter++;</span></span> <span class="line added-line"><span> _counter--;</span></span> <span class="line"><span>});</span></span> </code> </pre> </div> </div> </li> <li> <p>保存更改（<strong>文件</strong> > <strong>全部保存</strong>）或单击<strong>热重载</strong> <img alt="热重载图标" class="text-icon" src="https://docs.flutter.dev/assets/images/docs/get-started/hot-reload.svg" /> 按钮。</p> <p>Flutter 更新正在运行的应用，而不会丢失任何现有状态。请注意，现有值保持不变。</p> </li> <li> <p>再点击 <img alt="增量 (+)" class="text-icon" src="https://docs.flutter.dev/assets/images/docs/get-started/increment-button.png" /> 一次按钮。你会发现数值反而减少了，而不是增加了。</p> </li> </ol> </li> <li> <h3>探索 Flutter 侧边栏</h3> <p>Flutter 插件为 VS Code 添加了专用侧边栏，用于管理 Flutter 调试会话和设备、查看代码和小部件的概要以及访问 Dart 和 Flutter DevTools。</p> <ol> <li> <p>如果您的应用程序没有运行，请重新开始调试。</p> <p>转到<strong>"运行"</strong> > <strong>"开始调试"</strong>或按<kbd>F5</kbd>。</p> </li> <li> <p>在 VS Code 中打开 Flutter 侧边栏。</p> <p><img alt="Flutter 徽标" class="text-icon" src="https://docs.flutter.dev/assets/images/branding/flutter/logo/square.svg" /> 可以使用VS Code 侧边栏中的Flutter 按钮打开它，也可以通过运行<strong>Flutter：Focus on Flutter Sidebar View</strong>命令从命令面板打开它。</p> </li> <li> <p>在 Flutter 侧边栏的<strong>DevTools</strong>下，单击<strong>Flutter Inspector</strong>按钮。</p> <p>单独的<strong>Widget Inspector</strong>面板应该在 VS Code 中打开。</p> <p>在小部件检查器中，您可以查看应用的小部件树、查看每个小部件的属性和布局等。</p> </li> <li> <p>在小部件检查器中，尝试单击顶级<code>MyHomePage</code>小部件。</p> <p>应该打开其属性和布局的视图，并且 VS Code 编辑器应该导航到并聚焦包含该小部件的行。</p> </li> <li> <p>探索并尝试小部件检查器和 Flutter 侧边栏中的其他功能。</p> </li> </ol> </li>
继续你的 Flutter 之旅
恭喜！ 现在您已经安装并试用了 Flutter，请按照代码实验室中的步骤构建您的第一个应用，为其他目标平台设置开发，或探索以下资源以继续您的 Flutter 学习之旅。
