# Flutter 开发文档

> Flutter 上手起步，包括 widgets 介绍、样例代码、最新更新和 API 文档，帮助你撰写第一个 Flutter 应用。



<div class="card-grid">
  <Card title="安装 Flutter" link="/install" outlined="true">
    配置 Flutter 开发环境并开始构建。
  </Card>
  <Card title="Widget 目录" link="/ui/widgets" outlined="true">
    探索 Flutter SDK 中丰富多样的 Widget 合集。
  </Card>
  <Card title="API docs" link="https://api.flutter-io.cn" outlined="true">
    将 Flutter 框架的 API 文档添加到书签中。
  </Card>
  <Card title="学习资源" link="/learn" outlined="true">
    浏览教程、示例代码、Workshop 和指导。
  </Card>
  <Card title="视频资源（Flutter 官方）" link="https://www.youtube.com/@flutterdev" outlined="true">
    观看 Flutter YouTube 频道上的视频。
  </Card>
  <Card title="视频资源（Flutter 中文社区）" link="https://space.bilibili.com/344928717" outlined="true">
    关注 Flutter 中文社区的 bilibili 频道。
  </Card>
  <Card title="AI 创作" link="/ai/create-with-ai" outlined="true">
    学习如何构建并整合强大的 AI 工具。
  </Card>
</div>

**To see changes to the site since our last release,
see [What's new][].**

查看最近网站更新的内容，请查阅
[文档网站更新内容归档][What's new]。

[What's new]: /release/whats-new

## New to Flutter?

## 新接触 Flutter 吗？

Ready to build beautiful, multiplatform apps from a single codebase?
First, [set up your Flutter environment][],
then follow the [Flutter learning pathway][].

准备好通过同一套代码来构建精美的跨平台应用程序了吗？
首先，[配置你的 Flutter 环境][set up your Flutter environment]，
然后跟随 [Flutter 学习路径][Flutter learning pathway] 进行学习。

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

### Docs

### 文档

Coming from another platform? Check out Flutter for:
[Android][], [SwiftUI][], [UIKit][], [React Native][], and
[Xamarin.Forms][] developers.

看我们为各种已经有相关平台开发经验的开发者准备的文档：
- [给 Android 开发者的 Flutter 指南][Android]
- [给 iOS SwiftUI 开发者的 Flutter 指南][SwiftUI]
- [给 iOS UIKit 开发者的 Flutter 指南][UIKit]
- [给 React Native 开发者的 Flutter 指南][React Native]
- [给 Xamarin.Forms 开发者的 Flutter 指南][Xamarin.Forms]

[Building layouts][]
<br> Learn how to create layouts in Flutter,
  where everything is a [widget](/resources/glossary#widget).

[Flutter 中的布局][Building layouts]
<br> 学习如何在 Flutter 中创建布局，在 Flutter 里，所有事物都是 [widget](/resources/glossary#widget)。

[Understanding constraints][]
<br> Once you understand that "Constraints
  flow up. Sizes flow down. Parents set
  positions", then you are well on your
  way to understanding Flutter's layout model.

[理解布局约束][Understanding constraints]
<br> 一旦你理解了 Constraints flow up. Sizes flow down. Parents set positions
这个思路之后，就能更好帮助你了解 Flutter 的布局模型。

[Adding interactivity to your Flutter app][interactivity]
<br> Learn how to add a stateful widget to your app.

[为你的 Flutter 应用加入交互体验][interactivity]
<br> 在 app 里使用有状态的 widget。

[FAQ][]
<br> Get the answers to frequently asked questions.

[常见问题][FAQ]
<br> 常见问题解答

[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

### Videos

### 视频资源

我们在 YouTube 上有一个 [Flutter 频道](https://www.youtube.com/c/flutterdev)，欢迎订阅！
更多视频和播放列表介绍，以及社区制作的视频教程，
可以查看我们的 [Flutter 技术视频资源][videos] 页面。
同时，你可以关注 [“Google中国”的哔哩哔哩账号](https://space.bilibili.com/64169458)
了解更多更全面的谷歌技术中文内容，
也可以关注 [“Flutter 社区”的哔哩哔哩账号](https://space.bilibili.com/344928717)
了解更多来自社区的内容更新。

<div class="video-wrapper">
  <span class="video-intro">了解关于 Dart、Flutter 的最新动态！</span>
  <YouTubeEmbed id="I1uIbGh1dGE" title="Dart 和 Flutter 3.44 的新特性" fullWidth></YouTubeEmbed>
</div>
<br>

For more of the latest on Dart and Flutter, check out
the technical sessions from [Google I/O][io-wrap-up],
like these!

如果想要了解更多关于 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>

Also, we launched a new 4-video series at Google I/O called
the Full-stack developer guide:

此外，我们在 Google I/O 上发布了一个名为 《Full-stack developer guide》 的视频系列（共 4 集）：

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

You can find the 4 videos in this series, as well as a wrap-up video,
on the [Google I/O wrap-up][io-wrap-up] blog post.

你可以在 [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

To learn about all of the Flutter video series,
visit our [videos][] page.

请浏览我们的 [视频列表][videos]，来了解所有 Flutter 视频系列。

We release new videos almost every week!

我们几乎每周都会发布新视频！

<a class="filled-button" target="_blank" href="https://www.youtube.com/@flutterdev"><!-- Check out the Flutter YouTube channel -->浏览 Flutter YouTube 频道</a>

[videos]: /resources/videos