# 根据你的需求配置 Flutter

> 为你的首选开发环境和目标平台安装并配置 Flutter。



To get started developing with Flutter,
follow these steps to install and set up Flutter
for your preferred development environment and target platform.

要开始用 Flutter 进行开发，
请按照以下步骤，为你的首选开发环境和目标平台安装并配置 Flutter。

If you plan to use VS Code or another Code - OSS derived editor
like Antigravity, consider following the [Flutter quick start][] instead.

如果你计划使用 VS Code 或其他基于 Code OSS 的编辑器（例如 Antigravity），
建议改为按照 [Flutter 快速开始][Flutter quick start] 进行操作。

[Flutter quick start]: /install/quick

## Install and set up Flutter {: #install}

## 安装并配置 Flutter

To get started developing apps with Flutter,
install the Flutter SDK to your development device.
Choose one of the following installation methods:

要开始用 Flutter 开发应用，
请在你的开发设备上安装 Flutter SDK。
请选择以下任一安装方式：

<div class="card-grid">
  <a class="card outlined-card" href="/install/with-vs-code">
    <div class="card-header">
      <span class="card-title"><t>Install with VS Code</t><t>使用 VS Code 安装</t></span>
      <span class="card-subtitle"><t>Recommended</t><t>推荐</t></span>
    </div>
    <div class="card-content">
      <p>Use VS Code to quickly set up your Flutter development environment.</p>
      <p>使用 VS Code 快速配置你的 Flutter 开发环境。</p>
    </div>
  </a>
  <a class="card outlined-card" href="/install/manual">
    <div class="card-header">
      <span class="card-title"><t>Install manually</t><t>手动安装</t></span>
      <span class="card-subtitle"><t>For specific releases</t><t>适用于指定版本</t></span>
    </div>
    <div class="card-content">
      <p>Manually install and set up a specific Flutter SDK release.</p>
      <p>手动安装并配置指定的 Flutter SDK 版本。</p>
    </div>
  </a>
</div>

## Set up an IDE or editor {: #editor}

## 配置 IDE 或编辑器

For the best development experience with Flutter,
install an IDE or editor with support for Dart and Flutter.
Some popular options include VS Code, Antigravity,
Android Studio, and other Code OSS-based editors.

要获得最佳的 Flutter 开发体验，
请安装支持 Dart 和 Flutter 的 IDE 或编辑器。
常见选择包括 VS Code、Antigravity、
Android Studio 以及其他基于 Code OSS 的编辑器。

<div class="card-grid wide">
 <a class="card outlined-card" href="/tools/vs-code#setup">
   <div class="card-header">
     <span class="card-title">VS Code</span>
   </div>
   <div class="card-content">
     <p>Set up Flutter support in VS Code.</p>
     <p>在 VS Code 中配置 Flutter 支持。</p>
   </div>
 </a>
 <a class="card outlined-card" href="/tools/android-studio#setup">
   <div class="card-header">
     <span class="card-title">Android Studio</span>
   </div>
   <div class="card-content">
     <p>Set up Flutter support in Android Studio.</p>
     <p>在 Android Studio 中配置 Flutter 支持。</p>
   </div>
 </a>
 <a class="card outlined-card" href="/tools/android-studio#setup">
   <div class="card-header">
     <span class="card-title">IntelliJ</span>
   </div>
   <div class="card-content">
     <p>Set up Flutter support in an IntelliJ-based IDE.</p>
     <p>在基于 IntelliJ 的 IDE 中配置 Flutter 支持。</p>
   </div>
 </a>
</div>

## Set up a target platform {: #target-platform}

## 配置目标平台

Once you've successfully installed Flutter,
set up development for at least one target platform
to continue your journey with Flutter.

成功安装 Flutter 后，
请至少为一个目标平台配置开发环境，
以继续你的 Flutter 学习之旅。

We recommend [developing for the web][web-setup] first as
it requires no additional setup besides an appropriate browser.
You can always set up development for additional target platforms later.

我们建议先 [面向 Web 开发][web-setup]，
因为除合适的浏览器外无需额外配置。
你随时可以在之后为更多目标平台配置开发环境。

<div class="card-grid wide">
 <a class="card outlined-card" href="/platform-integration/android/setup">
   <div class="card-header">
     <span class="card-title"><t>Target Android</t><t>面向 Android</t></span>
     <span class="card-subtitle"><t>On any device</t><t>任意设备</t></span>
   </div>
   <div class="card-content">
     <p>Set up your development environment to build Flutter apps for Android.</p>
     <p>配置开发环境以构建面向 Android 的 Flutter 应用。</p>
   </div>
 </a>
 <a class="card outlined-card" href="/platform-integration/ios/setup">
   <div class="card-header">
     <span class="card-title"><t>Target iOS</t><t>面向 iOS</t></span>
     <span class="card-subtitle"><t>On macOS only</t><t>仅 macOS</t></span>
   </div>
   <div class="card-content">
     <p>Set up your development environment to build Flutter apps for iOS.</p>
     <p>配置开发环境以构建面向 iOS 的 Flutter 应用。</p>
   </div>
 </a>
 <a class="card outlined-card" href="/platform-integration/web/setup">
   <div class="card-header">
     <span class="card-title"><t>Target Web</t><t>面向 Web</t></span>
     <span class="card-subtitle"><t>On any device</t><t>任意设备</t></span>
   </div>
   <div class="card-content">
     <p>Set up your development environment to build Flutter apps for the web.</p>
     <p>配置开发环境以构建面向 Web 的 Flutter 应用。</p>
   </div>
 </a>
 <a class="card outlined-card" href="/platform-integration/windows/setup">
   <div class="card-header">
     <span class="card-title"><t>Target Windows</t><t>面向 Windows</t></span>
     <span class="card-subtitle"><t>On Windows only</t><t>仅 Windows</t></span>
   </div>
   <div class="card-content">
     <p>Set up your development environment to build Flutter apps for Windows.</p>
     <p>配置开发环境以构建面向 Windows 的 Flutter 应用。</p>
   </div>
 </a>
 <a class="card outlined-card" href="/platform-integration/macos/setup">
   <div class="card-header">
     <span class="card-title"><t>Target macOS</t><t>面向 macOS</t></span>
     <span class="card-subtitle"><t>On macOS only</t><t>仅 macOS</t></span>
   </div>
   <div class="card-content">
     <p>Set up your development environment to build Flutter apps for macOS.</p>
     <p>配置开发环境以构建面向 macOS 的 Flutter 应用。</p>
   </div>
 </a>
 <a class="card outlined-card" href="/platform-integration/linux/setup">
   <div class="card-header">
     <span class="card-title"><t>Target Linux</t><t>面向 Linux</t></span>
     <span class="card-subtitle"><t>On Linux only</t><t>仅 Linux</t></span>
   </div>
   <div class="card-content">
     <p>Set up your development environment to build Flutter apps for Linux.</p>
     <p>配置开发环境以构建面向 Linux 的 Flutter 应用。</p>
   </div>
 </a>
</div>

[web-setup]: /platform-integration/web/setup

## Continue your Flutter journey {: #next-steps}

## 继续你的 Flutter 之旅

**Congratulations!**
Now that you've installed Flutter, set up an IDE or editor,
and set up development for a target platform,
you can continue your Flutter learning journey.

**恭喜！**
现在你已经安装了 Flutter、配置了 IDE 或编辑器，
并为某个目标平台配置好了开发环境，
可以继续你的 Flutter 学习之旅了。

Follow the [Flutter learning pathway][],
set up development for an [additional target platform][], or
explore some of these other learning resources.

请按照 [Flutter 学习路径][Flutter learning pathway] 继续学习，
为 [其他目标平台][additional target platform] 配置开发环境，
或探索以下其他学习资源。

<div class="card-grid link-cards">
  <div class="card filled-card list-card">
    <div class="card-leading">
      <img src="/assets/images/decorative/flutter-on-phone.svg" height="160" aria-hidden="true"
        alt="A representation of Flutter on multiple devices."
        title="多部设备上的 Flutter 示意图。">
    </div>
    <div class="card-header">
      <span class="card-title"><t>Build for other platforms</t><t>面向其他平台构建</t></span>
    </div>
    <div class="card-content">
      <ul>
        <li>
          <a class="text-button" href="/platform-integration/android/setup"><t>Target Android</t><t>面向 Android</t></a>
        </li>
        <li>
          <a class="text-button" href="/platform-integration/ios/setup"><t>Target iOS</t><t>面向 iOS</t></a>
        </li>
        <li>
          <a class="text-button" href="/platform-integration/macos/setup"><t>Target macOS</t><t>面向 macOS</t></a>
        </li>
        <li>
          <a class="text-button" href="/platform-integration/windows/setup"><t>Target Windows</t><t>面向 Windows</t></a>
        </li>
        <li>
          <a class="text-button" href="/platform-integration/linux/setup"><t>Target Linux</t><t>面向 Linux</t></a>
        </li>
      </ul>
    </div>
  </div>

  <div class="card filled-card list-card">
    <div class="card-leading">
      <img src="/assets/images/decorative/pointing-the-way.png" height="160" aria-hidden="true"
        alt="Dash helping you explore Flutter learning resources."
        title="Dash 助你探索 Flutter 学习资源。">
    </div>
    <div class="card-header">
      <span class="card-title"><t>Learn Flutter development</t><t>学习 Flutter 开发</t></span>
    </div>
    <div class="card-content">
      <ul>
        <li>
          <a class="text-button" href="/learn/pathway"><t>Learn the fundamentals</t><t>学习基础知识</t></a>
        </li>
        <li>
          <a class="text-button"
            href="https://www.youtube.com/watch?v=b_sQ9bMltGU&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG">
            <t>Discover Flutter widgets</t><t>探索 Flutter widget</t></a>
        </li>
        <li>
          <a class="text-button" href="/reference/learning-resources"><t>Explore learning resources</t><t>浏览学习资源</t></a>
        </li>
        <li>
          <a class="text-button" href="https://dart.cn/overview">
            <span><t>Learn Dart programming</t><t>学习 Dart 编程</t></span>
            <Icon id="open_in_new" size="1rem" />
          </a>
        </li>
      </ul>
    </div>
  </div>

  <div class="card filled-card list-card">
    <div class="card-leading">
      <img src="/assets/images/decorative/up-to-date.png" height="160" aria-hidden="true"
        alt="Keep up to date with Flutter"
        title="及时了解 Flutter 动态">
    </div>
    <div class="card-header">
      <span class="card-title"><t>Stay up to date with Flutter</t><t>及时了解 Flutter 动态</t></span>
    </div>
    <div class="card-content">
      <ul>
        <li>
          <a class="text-button" href="/install/upgrade"><t>Update Flutter</t><t>更新 Flutter</t></a>
        </li>
        <li>
          <a class="text-button" href="/release/release-notes"><t>Find out what's new</t><t>了解新特性</t></a>
        </li>
        <li>
          <a class="text-button" href="https://flutter.dev/blog">
            <span><t>Check out the blog</t><t>查看博客</t></span>
            <Icon id="open_in_new" size="1rem" />
          </a>
        </li>
        <li>
          <a class="text-button" href="https://www.youtube.com/@flutterdev">
            <span><t>Subscribe on YouTube</t><t>在 YouTube 订阅</t></span>
            <Icon id="open_in_new" size="1rem" />
          </a>
        </li>
        <li>
          <a class="text-button" href="https://bsky.app/profile/flutter.dev">
            <span><t>Follow on Bluesky</t><t>在 Bluesky 关注</t></span>
            <Icon id="open_in_new" size="1rem" />
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>


[Flutter learning pathway]: /learn/pathway
[additional target platform]: /platform-integration#setup

