# Flutter 文件

> 開始使用 Flutter。元件、範例、更新及 API 文件， 協助您撰寫第一個 Flutter 應用程式。



<div class="card-grid">
  <Card title="安裝 Flutter" link="/install" outlined="true">
    設定您的開發環境並開始建置。
  </Card>
  <Card title="元件目錄" link="/ui/widgets" outlined="true">
    探索 SDK 中豐富的 Flutter 元件 (Widget) 集合。
  </Card>
  <Card title="API 文件" link="https://api.flutter.dev" outlined="true">
    將 Flutter 框架的 API 參考文件加入書籤。
  </Card>
  <Card title="學習資源" link="/learn" outlined="true">
    瀏覽教學、範例程式碼、工作坊與食譜。
  </Card>
  <Card title="影片" link="https://www.youtube.com/@flutterdev" outlined="true">
    觀看 Flutter YouTube 頻道上的眾多影片。
  </Card>
  <Card title="以 AI 開發" link="/ai/get-started" outlined="true">
    了解如何建置並整合強大的 AI 工具。
  </Card>
</div>

**若要查看自上次發佈以來的網站變更，
請參閱[最新動態][]。**

[最新動態]: /release/whats-new

## 初次使用 Flutter？

準備好從單一程式碼庫建置精美的跨平台應用程式了嗎？
首先，[設定您的 Flutter 開發環境][set up your Flutter environment]，
再跟著 [Flutter 學習路徑][Flutter learning pathway] 開始學習。

[set up your Flutter environment]: /install/quick
[Flutter learning pathway]: /learn/pathway

### 文件

從其他平台轉過來的開發者？請查看 Flutter 針對以下開發者的說明：
[Android][]、[SwiftUI][]、[UIKit][]、[React Native][] 以及
[Xamarin.Forms][] 開發者。

[版面配置建置][Building layouts]
: 學習如何在 Flutter 中建立版面配置，
  在 Flutter 中一切皆為[元件](/resources/glossary#widget)。

[了解約束條件][Understanding constraints]
: 一旦您理解「約束條件向下傳遞、尺寸向上回傳、父元件設定位置」的概念，
  您就能掌握 Flutter 版面配置模型的精髓。

[為您的 Flutter 應用程式新增互動性][interactivity]
: 學習如何為應用程式新增具狀態的元件 (Widget)。

[常見問題][FAQ]
: 取得常見問題的解答。

[Android]: /flutter-for/android-devs
[Building layouts]: /ui/layout
[FAQ]: /resources/faq
[interactivity]: /ui/interactivity
[SwiftUI]: /flutter-for/swiftui-devs
[UIKit]: /flutter-for/uikit-devs
[React Native]: /flutter-for/react-native-devs
[Understanding constraints]: /ui/layout/constraints
[Xamarin.Forms]: /flutter-for/xamarin-forms-devs

### 影片

<div class="video-wrapper">
  <span class="video-intro">查看 Dart 與 Flutter 的最新資訊</span>
  <YouTubeEmbed id="I1uIbGh1dGE" title="What's New in Dart and Flutter 3.44" fullWidth></YouTubeEmbed>
</div>
<br>

若想了解更多 Dart 與 Flutter 的最新消息，請查看
來自 [Google I/O][io-wrap-up] 的技術議程，
例如以下這些！

<div class="card-grid">
  <div class="card wrapped-card outlined-card">
    <div class="card-content">
      <YouTubeEmbed id="UNdQhnpm8GY" title="Vibe once, run anywhere with Google and Antigravity"></YouTubeEmbed>
    </div>
  </div>
  <div class="card wrapped-card outlined-card">
    <div class="card-content">
      <YouTubeEmbed id="O0UjId1VoRU" title="How to write really good Flutter code"></YouTubeEmbed>
    </div>
  </div>
</div>

此外，我們在 Google I/O 發佈了名為「全端開發者指南」的 4 部影片系列：

<div class="video-wrapper">
  <YouTubeEmbed id="hNbY3Bmgojg" title="The Full-stack developer guide" fullWidth></YouTubeEmbed>
</div>

您可以在 [Google I/O 總結][io-wrap-up] 部落格文章中找到本系列的 4 部影片及一部總結影片。

[io-wrap-up]: https://blog.flutter.dev/thats-a-wrap-everything-flutter-at-google-i-o-2026-f316e57186e3

若要了解所有 Flutter 影片系列，
請造訪我們的[影片][videos]頁面。

我們幾乎每週都會發佈新影片！

<a class="filled-button" target="_blank" href="https://www.youtube.com/@flutterdev">前往 Flutter YouTube 頻道</a>

[videos]: /resources/videos