Codelab

Flutter Codelab 提供了循序渐进、动手实践的编码体验。一些 Codelab 在 DartPad 中运行——无需下载！

如果您是 Flutter 新手，我们建议您从以下 Codelab 开始

• 构建您的第一个 Flutter 应用 (研讨会)
  我们非常受欢迎的“编写您的第一个 Flutter 应用”Codelab（如下所示）的讲师主导版本。

• 您的第一个 Flutter 应用
  创建一个简单的应用，自动生成听起来很酷的名称，例如“newstay”、“lightstream”、“mainbrake”或“graypine”。此应用具有响应能力，并在移动端、桌面端和 Web 端运行。（这也取代了之前的“编写您的第一个 Flutter 应用”移动端第 1 部分和第 2 部分 Codelab。）

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

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

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

• Dart 空安全实战 (研讨会)
  讲师主导的研讨会，介绍启用 Dart 空安全类型系统的功能。

• 如何使用继承小部件管理应用程序状态 (研讨会)
  学习如何通过使用InheritedWidget 类（Flutter 提供的低级状态管理类之一）来管理应用数据的状态。

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

• 如何使用 Flutter 检查器调试布局问题
  不是正式的 Codelab，而是有关如何使用 Flutter 检查器和布局浏览器调试常见布局问题的分步说明。

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

• 使用 Flutter 的 Material Motion 构建漂亮的过渡动画
  学习如何使用 Material 的动画包为名为 Reply 的 Material 应用添加预构建的过渡动画。

• 让您的 Flutter 应用从无聊变得美丽
  学习如何使用 Material 3 中的一些功能使您的应用更美观并且更具响应能力。

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

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

• MDC-103 Flutter：使用颜色、形状、高度和类型的 Material 主题
  了解 Flutter 的 Material Components 如何轻松区分您的产品，并通过设计表达您的品牌。通过添加一个显示产品的首页来继续构建您的电子商务应用。

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

• Flutter 中的自适应应用
  学习如何构建一个 Flutter 应用，该应用可以适应其运行的平台，无论是 Android、iOS、Web、Windows、macOS 还是 Linux。

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

学习如何将 Flutter 与其他技术结合使用。

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

• 将 AdMob 横幅广告和原生内嵌广告添加到 Flutter 应用
  学习如何在列出可能的航班目的地的旅行预订应用中实现内嵌横幅广告和原生广告。

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

• 使用 FirebaseUI 向 Flutter 应用添加用户身份验证流程
  学习如何仅使用几行代码将 Firebase 身份验证添加到 Flutter 应用。

• 了解 Flutter 的 Firebase (研讨会)
  我们受欢迎的“了解 Flutter 的 Firebase”Codelab（如下所示）的讲师主导版本。

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

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

• 使用 Firebase Cloud Messaging 发送和接收 Flutter 应用的通知
  学习如何使用 Flutter 和 Firebase Cloud Messaging 开发多平台应用，集成 FCM 以在 Android、iOS 和 Web 上发送和接收消息。

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

• 使用 Flutter 和 Flame 构建 2D 物理游戏—新增
  此 Codelab 指导您在 Flutter 和 Flame 游戏中使用类似于 Box2D 的 2D 物理模拟（称为Forge2D）来制作游戏机制。

• 使用 Flutter 构建文字谜题—新增
  此 Codelab 侧重于构建文字谜题游戏，并深入探讨使用 Flutter 的后台处理来生成相互关联单词的扩展纵横字谜式网格。

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

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

• 创建一个 Flutter 应用来使用 TensorFlow 对文本进行分类
  学习如何通过 REST 和 gRPC 从 Flutter 应用运行 TensorFlow Serving 的文本分类推理。

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

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

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

• 使用 Dialogflow 和 Flutter 为移动设备构建语音机器人 (研讨会)
  Dialogflow 和 Flutter Codelab（如下所示）的讲师主导版本。

• 使用 Dialogflow 和 Flutter 为 Android 构建语音机器人
  学习如何构建一个移动端常见问题解答机器人，它可以回答有关 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、桌面或 Web）的代码。

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

• 将“主页”小部件添加到 Flutter 应用
  学习如何在 iOS 上将“主页”小部件添加到 Flutter 应用。这适用于您的主屏幕、锁定屏幕或今日视图。

除非另有说明，本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-10-04。 查看源代码 或 报告问题.