Codelabs

Flutter codelabs 提供有指导、动手实践的编码体验。部分 codelabs 可在 DartPad 中运行，无需下载！

如果你是 Flutter 新手，我们建议从以下任一 codelab 开始

• 构建你的第一个 Flutter 应用（研讨会）
  这是我们非常受欢迎的“编写你的第一个 Flutter 应用”codelab（如下所列）的讲师指导版。

• 你的第一个 Flutter 应用
  创建一个简单的应用，可自动生成好听的名称，例如“newstay”、“lightstream”、“mainbrake”或“graypine”。此应用响应灵敏，可在移动设备、桌面设备和网页上运行。

• Dart 3 中的记录和模式
  探索 Dart 3 的新记录和模式特性。了解如何在 Flutter 应用中使用它们，帮助您编写更具可读性和可维护性的 Dart 代码。

• 在 Flutter 中构建滚动体验（研讨会）
  从一个执行简单、直接滚动的应用开始，然后通过使用 sliver 增强它，以创建花哨和自定义的滚动效果。

• Dart 空安全实践（研讨会）
  讲师指导的研讨会，介绍启用 Dart 空安全类型系统的功能。

• 如何使用继承组件管理应用状态（研讨会）
  了解如何使用 InheritedWidget 类管理应用数据状态，这是 Flutter 提供的低级状态管理类之一。

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

• 如何使用 Flutter Inspector 调试布局问题
  这不是一个官方 codelab，但提供了使用 Flutter Inspector 和 Layout Explorer 调试常见布局问题的分步说明。

• Flutter 中的动画
  了解使用 Flutter 构建动画效果所需的一切。此 codelab 涵盖隐式动画组件、显式动画组件、动画控制器、如何使用 Material 动画包中的组件，以及如何在 Android 上设置预测性返回。

• 隐式动画
  使用 DartPad（无需下载！）学习如何使用隐式动画为 UI 中的组件添加运动和创建视觉效果。

• 使用 Flutter 的 Material Motion 构建精美过渡效果
  了解如何使用 Material 动画包为名为 Reply 的 Material 应用添加预构建过渡效果。

• 将你的 Flutter 应用从平淡无奇变为精美绝伦
  了解如何使用 Material 3 的一些功能，让你的应用更美观且更具响应性。

• MDC-101 Flutter：Material Components (MDC) 基础
  通过使用核心组件构建一个简单应用，了解 Material Components 的基础知识。这四个 MDC codelabs 将指导您构建一个名为 Shrine 的电子商务应用。您将首先使用 MDC Flutter 的几个组件构建一个登录页面。

• MDC-102 Flutter：Material 结构和布局
  了解如何在 Flutter 中使用 Material 进行结构和布局。通过添加导航、结构和数据，继续构建 MDC-101 中介绍的电子商务应用。

• MDC-103 Flutter：使用颜色、形状、高程和字体进行 Material 主题设计
  了解 Flutter 的 Material Components 如何让您轻松地实现产品差异化，并通过设计表达您的品牌。通过添加显示产品的主屏幕，继续构建您的电子商务应用。

• MDC-104 Flutter：Material 高级组件
  改进您的设计并学习使用我们的高级组件背景菜单。通过添加一个带有菜单的背景来完成您的电子商务应用，该菜单可按选定类别筛选产品。

• Flutter 中的自适应应用
  了解如何构建一个能适应其运行平台（无论是 Android、iOS、网页、Windows、macOS 还是 Linux）的 Flutter 应用。

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

了解如何将 Flutter 与其他技术结合使用。

• 向 Flutter 应用添加 AdMob 广告
  了解如何向名为“Awesome Drawing Quiz”的应用（一款让玩家猜测绘画名称的游戏）添加 AdMob 横幅广告、插页式广告和激励广告。

• 向 Flutter 应用添加 AdMob 横幅广告和原生内嵌广告
  了解如何向列出可能航班目的地的旅行预订应用实现内嵌横幅广告和原生广告。

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

• 构建一个由 Gemini 提供支持的 Flutter 应用—新增
  在此 codelab 中，您将学习如何使用 Firebase 中的 Vertex AI 将 Gemini 集成到您的 Flutter 应用中。

• 使用 FirebaseUI 向 Flutter 应用添加用户身份验证流程
  了解如何使用少量代码向 Flutter 应用添加 Firebase 身份验证。

• 了解 Flutter 的 Firebase（研讨会）
  这是我们热门的“了解 Flutter 的 Firebase”codelab（如下所列）的讲师指导版。

• 了解 Flutter 的 Firebase
  使用 Flutter 在 Android 和 iOS 上构建一个活动 RSVP 和留言簿聊天应用，使用 Firebase Authentication 进行用户身份验证，并使用 Cloud Firestore 同步数据。

• 使用 Firebase Emulator Suite 为您的 Flutter 应用进行本地开发
  了解在 Flutter 开发时如何使用 Firebase Emulator Suite。您还将学习如何使用 Auth 和 Firestore 模拟器。

• 使用 Firebase Cloud Messaging 为 Flutter 应用发送和接收通知
  了解如何使用 Flutter 和 Firebase Cloud Messaging 开发多平台应用，集成 FCM 以在 Android、iOS 和网页上发送和接收消息。

• 使用 SoLoud 为您的 Flutter 游戏添加声音和音乐—新增
  SoLoud 包是一个免费便携的引擎，可提供许多游戏必不可少的低延迟和高性能音效。在此 codelab 中，了解如何将 SoLoud 添加到您的游戏中。

• 使用 Flutter 和 Flame 构建 2D 物理游戏—新增
  此 codelab 将指导您使用一个类似 Box2D 的 2D 物理模拟引擎，即 Forge2D，在 Flutter 和 Flame 游戏中制作游戏机制。

• 使用 Flutter 构建字谜游戏—新增
  此 codelab 侧重于构建字谜游戏，并深入探讨如何使用 Flutter 的后台处理功能生成庞大的交叉词谜风格的互锁单词网格。

• Flutter 与 Flame 入门
  使用 Flame 2D 游戏引擎构建一个打砖块游戏克隆，并将其嵌入到 Flutter 包装器中。您将使用 Flame 的 Effects 来动画和移除组件，并结合 google_fonts 和 flutter_animate 包，使整个游戏看起来设计精良。

• 使用 TensorFlow Lite Model Maker 创建自定义文本分类模型
  

• 使用 Flutter 应用通过 TensorFlow 对文本进行分类
  了解如何通过 REST 和 gRPC，使用 TensorFlow Serving 从 Flutter 应用运行文本分类推理。

• 使用 TensorFlow Lite Model Maker 训练评论垃圾邮件检测模型
  了解如何使用 Colab 安装 TensorFlow Lite Model Maker，如何使用数据加载器，以及如何构建模型。

• 向 Flutter 应用添加 Google 地图
  在应用中显示 Google 地图，从 Web 服务检索数据，并将数据作为标记显示在地图上。

• 向您的 Flutter 应用添加 WebView
  使用 WebView Flutter 插件，您可以将 WebView 组件添加到您的 Android 或 iOS Flutter 应用中。

• 使用 Dialogflow 和 Flutter 为移动设备构建语音机器人（研讨会）
  这是 Dialogflow 和 Flutter codelab（如下所列）的讲师指导版。

• 使用 Dialogflow 和 Flutter 为 Android 构建语音机器人
  了解如何构建一个移动 FAQ 机器人，它可以回答关于 Dialogflow 工具的大多数常见问题。最终用户可以通过文本界面进行交互，或通过移动设备的内置麦克风进行语音交互流。

• 在 Flutter 插件中使用 FFI
  了解如何使用 Dart 的 FFI（外部函数接口）库 ffigen，这使您能够利用提供 C 接口的现有原生库。

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

了解如何测试您的 Flutter 应用。

• 如何测试 Flutter 应用
  从一个使用 Provider 包管理状态的简单应用开始。对 Provider 包进行单元测试。为其中两个组件编写组件测试。使用 Flutter Driver 创建集成测试。

了解如何编写针对特定平台（如 iOS、Android、桌面或网页）的代码。

• 编写 Flutter 桌面应用程序
  构建一个 Flutter 桌面应用（Windows、Linux 或 macOS），用于访问 GitHub API 以检索您的仓库、已分配问题和拉取请求。作为此任务的一部分，创建并使用插件与原生 API 和桌面应用交互，并使用代码生成来构建 GitHub API 的类型安全客户端库。

• 向您的 Flutter 应用添加主屏幕组件
  了解如何在 iOS 上向您的 Flutter 应用添加主屏幕组件。这适用于您的主屏幕、锁定屏幕或今日视图。