description bug_report

Codelabs

Flutter codelabs 提供了指导性的动手编码体验。某些 codelabs 在 DartPad 中运行，无需下载！

适合初学者

如果您是 Flutter 新手，我们建议从以下 codelabs 之一入手

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

• 您的第一个 Flutter 应用程序
  创建一个简单的应用程序，自动生成好听的名字，例如“newstay”、“lightstream”、“mainbrake”或“graypine”。此应用程序具有响应能力，可在移动设备、台式机和网络上运行。（这也取代了之前的“编写您的第一个 Flutter 应用程序”移动版、第 1 部分和第 2 部分 codelabs。）

• 在网络上编写您的第一个 Flutter 应用程序
  在 DartPad 中实现一个简单的网络应用程序（无需下载！），其中显示了一个包含三个文本字段的登录屏幕。当用户填写这些字段时，进度条会沿着登录区域的顶部进行动画。此 codelab 专门为网络编写，但是如果您已下载并配置了 Android 和 iOS 工具，则完成的应用程序也可以在 Android 和 iOS 设备上运行。

后续步骤

• Dart 3 中的记录和模式
  了解 Dart 3 的新记录和模式功能。学习如何在 Flutter 应用中使用它们来帮助你编写更具可读性和可维护性的 Dart 代码。

• 在 Flutter 中构建滚动体验（研讨会）
  从执行简单直接滚动的应用开始，并通过使用 sliver 增强它来创建精美的自定义滚动效果。

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

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

设计 Flutter UI

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

• 如何使用 Flutter Inspector 调试布局问题
  这不是官方代码实验室，但它提供了有关如何使用 Flutter Inspector 和 Layout Explorer 调试常见布局问题的逐步说明。

• 隐式动画
  使用 DartPad（无需下载！）了解如何使用隐式动画为 UI 中的小部件添加动作并创建视觉效果。

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

• 让你的 Flutter 应用从乏味变为精美
  了解如何使用 Material 3 中的一些功能让你的应用更美观且更具响应性。

• MDC-101 Flutter：Material Components (MDC) 基础知识
  通过使用核心组件构建一个简单的应用，了解使用 Material Components 的基础知识。四个 MDC 代码实验室指导你构建一个名为 Shrine 的电子商务应用。你将从使用 MDC Flutter 的多个组件构建登录页面开始。

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

• MDC-103 Flutter：使用颜色、形状、高度和类型进行 Material 主题设置
  了解 Material Components for Flutter 如何轻松让您的产品与众不同，并通过设计表达您的品牌。通过添加显示产品的首页，继续构建您的电子商务应用程序。

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

• Flutter 中的自适应应用程序
  了解如何构建一个 Flutter 应用程序，它可以适应其运行的平台，无论是 Android、iOS、网络、Windows、macOS 还是 Linux。

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

将 Flutter 与

了解如何将 Flutter 与其他技术一起使用。

Flutter 获利

• 向 Flutter 应用程序添加 AdMob 广告
  了解如何向一个名为 Awesome Drawing Quiz 的应用程序添加一个 AdMob 横幅、一个插页式广告和一个奖励广告，这是一个让玩家猜测绘画名称的游戏。

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

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

Flutter 和 Firebase

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

• 了解 Flutter 的 Firebase（研讨会）
  我们流行的“了解适用于 Flutter 的 Firebase”代码实验室（如下所示）的讲师指导版本。

• 了解适用于 Flutter 的 Firebase
  使用 Flutter 在 Android 和 iOS 上构建事件 RSVP 和留言簿聊天应用，使用 Firebase 身份验证对用户进行身份验证，并使用 Cloud Firestore 同步数据。

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

Flutter 和 TensorFlow

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

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

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

Flutter 和其他技术

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

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

• 使用 Dialogflow 和 Flutter 为移动设备构建语音机器人（研讨会）
  Dialogflow 和 Flutter 代码实验室（如下所示）的讲师指导版本。

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

• 使用 Flutter 简介 Flame
  使用 Flame 2D 游戏引擎构建 Breakout 克隆，并将其嵌入 Flutter 包装器中。您将使用 Flame 的效果来对组件进行动画处理和移除，以及使用 google_fonts 和 flutter_animate 包，使整个游戏看起来设计精良。

• 在 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 插件
  了解如何通过为 iOS 和 Android 创建一个在主机平台上处理音频的音乐插件来编写插件。然后制作一个使用你的插件制作音乐键盘的示例应用。

• 在 Flutter 网页应用中使用插件
  完成一个报告 GitHub 代码库中星标数量的应用。使用 Dart DevTools 进行一些简单的调试，并在 Firebase 上托管你的应用，最后，使用 Flutter 插件启动应用并打开托管的隐私政策。

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

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

其他资源

有关特定于 Dart 的代码实验室，请参阅 代码实验室页面，网址为 Dart 网站。

我们还推荐以下在线课程

• 使用 Dart 的完整 Flutter 开发训练营