Codelab

Flutter 的 Codelab 是一份为新手准备的入门指南。一些 Codelab 运行在 DartPad—上，这意味着你不需要下载任何东西就能够轻松学习。

如果你刚开始学习 Flutter，我们推荐你学习下面的 Codelab 之一：

• 构建你的第一个 Flutter App (workshop) 新!
  我们非常受欢迎的「编写你的第一个 Flutter App，第一部分」 codelab（如下所列）的讲师指导版。

• 你的第一个 Flutter 应用
  创建一个简单的应用，来自动生成很酷的名字，比如: "newstay"、"lightstream"、"mainbrake" 或者 "graypine"。这是一个自适应应用，可以运行在手机端、电脑端和 Web 端。

• 编写你的第一个 Flutter web 应用
  在 DartPad 中实现一个简单的 web 应用（无需下载任何东西！），它将会展示一个具有三个文本输入框的注册界面。当用户填完输入框，一个进度条动画将会展示在登录区域的顶部。这篇 codelab 是为 web 量身定做的，但如果你下载并配置好了 Android 以及 iOS 的工具，那么整个应用同样也能运行在 Android 以及 iOS 的设备上。

• Dart 3 中的 Records 和 Patterns
  新! 了解 Dart 3 中的新 records 和 patterns 特性。学习如何在 Flutter 应用中使用它们来帮助你编写更易读、更易维护的 Dart 代码。

• 在 Flutter 中构建滚动体验 (workshop)
  从一个执行简单、直接滚动的应用程序入门，并通过使用 sliver 增强它以创建奇特的自定义滚动效果。

• Dart 空安全实战 (workshop)
  由讲师指导的 workshop，介绍 Dart 空安全类型系统的特性。

• 如何使用 inherited widgets 管理应用程序状态 (workshop)
  了解如何使用 InheritedWidget 类（Flutter 提供的 基础状态管理方案 之一）管理应用数据的状态。

了解 Material Design 和 Flutter基本概念，例如布局和动画：

• 如何使用 Flutter Inspector 调试布局
  (非官方产出的 codelab) 手把手的介绍如何使用 Flutter Inspector 和 Layout Explorer 调试一些常见的布局问题。

• 渐变动画
  使用 DartPad 学习如何创建渐变动画，并为你的界面加入动画效果。

• 使用 Material Motion 为 Flutter 构建精美的过渡动画
  了解如何使用 Material animations [] package 为名为 Reply 的 Material 应用添加预构建的过渡。

• 让你的 Flutter 应用从平淡到出彩 新增内容
  学习如何使用 Material 3 的一些特性让你的应用更出彩并加强其响应式特性。

• MDC Flutter 教程 1：Material 组件基础
  学习使用 Material 核心组件构建一个简单的应用。我们最终会构建一个售卖衣服和家居的电子商务应用－ Shrine，本节将从一个简单的登录页面开始帮助你在 Flutter 上使用 Material 组件。

• MDC Flutter 教程 2：Material 组件结构和布局
  学习如何在 Flutter 中使用 Material 样式的结构和布局。通过添加导航、结构和数据，继续构建那个电子商务应用－ Shrine。

• MDC Flutter 教程 3：Material 组件主题、形状、阴影和类型
  探寻如何通过 Flutter Material 组件让你的产品更出众，并通过你的设计传达产品的品牌。我们会为我们的电子商务应用加入一个首页展现所有的产品。

• MDC Flutter 教程 4：Material 组件进阶
  改进设计并学习如何使用高级的组件 - backdrop 菜单。本期我们将通过加入一个全屏（backdrop）样式的菜单，用于分类显示你的产品。至此我们就结束了这个电子商务应用的构建

• 使用 Flutter 构建自适应应用
  了解如何使用 Flutter 构建一个可以运行在 Android、iOS、Web、Windows、macOS 和 Linux 上的自适应应用。

• 在 Flutter 中构建下一代 UI
  了解如何构建一个使用 flutter_animate、片段着色器和粒子场的 Flutter 应用。你将构建一个用户界面，它会唤起我们在不编码时都喜欢看的科幻电影和电视节目。

学习如何使用在 Flutter 中使用其他技术产品/平台：

• 为 Flutter 应用加入 AdMob
  为一个名叫 Awesome Drawing Quiz 的小游戏加入 AdMob 标语广告、插页式广告和奖励广告。这是一个看图猜字的游戏。

• 向 Flutter 应用中添加 AdMob 广告横幅以及原生嵌入式广告
  学习如何在一个旅行预约应用中嵌入 inline banner 以及原生广告。

• 为 Flutter 应用添加应用内购买功能
  扩展一个使用 Dash 吉祥物作为货币的简单游戏应用程序，以提供三种类型的应用程序内购买：消耗品、非消耗品和订阅。

• Add a user authentication flow to a Flutter app using FirebaseUI
  Learn how to add Firebase authentication to a Flutter app with only a few lines of code.

• 在 Flutter 里使用 Firebase (workshop)
  我们广受欢迎的「在 Flutter 里使用 Firebase」codelab 的讲师指导版本（如下所列）。

• 在 Flutter 里使用 Firebase
  学习如何在 Flutter 里使用 Firebase 实时数据库的功能，以及如何使用事物 (transaction) 同时更新不同设备里的信息。

• Local development for your Flutter apps using the Firebase Emulator Suite
  Learn how to use the Firebase Emulator Suite when developing with Flutter. You will also learn to use the Auth and Firestore emulators.

• Send and receive notifications for a Flutter app using Firebase Cloud Messaging
  Learn how to develop a multi-platform app with Flutter and Firebase Cloud Messaging, integrating FCM to send and receive messages on Android, iOS, and web.

• 使用 SoLoud 为 Flutter 游戏添加声音和音乐—新
  SoLoud package 是一个免费且可移植的引擎，可提供许多游戏所需的低延迟和高性能的音效。在当前 codelab 中，你将学习如何将 SoLoud 添加到游戏中。

• 使用 Flutter 和 Flame 制作 2D 物理游戏—新
  当前 codelab 将指导你在 Flutter 和 Flame 游戏中使用 Forge2D （与 Box2D 类似）来打造 2D 物理模拟的游戏机制。

• 使用 Flutter 制作字谜游戏—新
  当前 codelab 重点关注如何构建字谜游戏，并深入研究如何使用 Flutter 的后台处理来生成大规模的纵横字谜风格的单词网格。

• Flutter Flame 入门
  使用 Flame 2D 游戏引擎制作一个 Breakout 克隆版，并将其嵌入 Flutter wrapper 中。你将使用 Flame 的 Effects 制作动画和组件的移除，同时使用 google_fonts 和 flutter_animate package，让整个游戏看起来有着精良的设计。

• Create a custom text-classification model with TensorFlow Lite Model Maker
  

• Create a Flutter app to classify texts with TensorFlow
  Learn how to run a text-classification inference from a Flutter app with TensorFlow Serving through REST and gRPC.

• Train a comment-spam detection model with TensorFlow Lite Model Maker
  Learn how to install the TensorFlow Lite Model Maker with Colab, how to use a data loader, and how to build a model.

• 在 Flutter 应用中添加谷歌地图
  在应用里显示谷歌地图，接收网络传回的数据，在地图上显示一个标示。

• 为你的 Flutter 应用添加 WebView
  使用 WebView Flutter 插件，你可以将 WebView widget 添加到你的 Android 或 iOS Flutter 应用程序中。

• 使用 Dialogflow 和 Flutter 为移动设备构建语音机器人 (workshop)
  Dialogflow 和 Flutter codelab 的讲师指导版本（如下所列）。

• 使用 Dialogflow 和 Flutter 为 Android 构建语音机器人
  学习如何构建可以回答有关 Dialogflow 工具的最常见问题的移动式常见问题解答机器人。终端用户可以通过移动设备的内置麦克风与文本界面交互或流式传输语音交互。

• 在 Flutter 插件中使用 FFI
  了解如何使用 Dart 的 FFI（外部函数接口）库和 ffigen，让你可以使用提供了 C 语言接口的现有原生库。

• 使用 PaLM API 和 Flutter 创作有关 Google 产品的俳句 (haiku)
  了解如何构建一个使用 PaLM API 并根据 Google 产品名称生成俳句 (haiku) 的应用。 PaLM API 可让你访问 Google 最先进的大语言模型。

学习如何测试你的 Flutter 应用：

• 如何测试一个 Flutter 应用
  从一个简单的应用开始，该应用使用 Provider package 来管理状态，进而对提供应用进行单元测试 —— 为其中两个小部件编写小部件测试；使用 Flutter Driver 创建集成测试。

学习如何撰写在特定的平台运行的代码，比如 iOS、Android、Web 和桌面端。

• 编写一个 Flutter 桌面应用
  构建一个 Flutter 桌面端应用，适用于 Windows、Linux 和 macOS。构建一个 Flutter 桌面应用以通过 GitHub APIs 来检索你的代码仓库 (repo)，已分配的问题 (issue) 和拉取请求 (pull request)。本任务还有一部分内容，需要创建并使用插件，让原生 API 和桌面应用进行交互，并为 GitHub APIs 构建一个类型安全的客户端库。

• 为你的 Flutter 应用添加首页小部件
  学习如何通过你的 Flutter 应用添加一个首页小部件。小部件会展示在首页、锁屏页以及今日预览中。

除非另有说明，本文档之所提及适用于 Flutter 的最新稳定版本，本页面最后更新时间: 2024-10-02。 查看文档源码 或者 为本页面内容提出建议。