Codelabs & workshops

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

Flutter workshops 与 codelabs 类似，但由讲师指导并始终使用 DartPad。 workshop 链接也会提供给你相关的 YouTube 视频，该视频会告诉你在哪里可以找到相关的 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)
  基于 dart.cn 站点上的 空安全 codelab 的讲师指导版 workshop。

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

使用 Flutter 设计 UI

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

• Flutter 布局基础要点
  在网页浏览器里使用 DartPad 学习基础的 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 中使用其他技术产品/平台：

使用 Flutter 盈利

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

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

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

Flutter 和 Firebase 结合

• 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.

Flutter 和 TensorFlow 结合

• 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 应用中添加谷歌地图
  在应用里显示谷歌地图，接收网络传回的数据，在地图上显示一个标示。

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

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

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

• Building a game with Flutter and Flame
  Learn how to create a platform game (featuring Dash or Sparky), using the Flame package.

• Using FFI in a Flutter plugin
  Learn how to use Dart’s FFI (foreign function interface) library, ffigen, allowing you to leverage existing native libraries that provide a C interface.

• Create haikus about Google products with the PaLM API and Flutter
  NEW Learn how to build an app that uses the PaLM API to generate haikus based on Google product names. The PaLM API gives you access to Google’s state-of-the-art large language models.

测试

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

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

撰写平台特别的代码

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

• 使用 Flutter 构建 iOS 风格的应用 构建 iOS 风格和体验的购物应用 Shrine，创建多个选项卡，使用 provider package 来管理不同的页面。

• 如何编写一个 Flutter（原生平台）插件
  编写一个原生平台（iOS 和 Android）的音乐插件，处理原生平台音频，然后构建一个示例应用，使用这个插件制作一个音乐键盘。

• 在 Flutter Web 应用使用插件
  构建一个完整的应用来显示 GitHub 仓库的星星（收藏）数量，使用 Dart DevTools 开发者工具进行一些简答的调试，然后将应用部署到 Firebase 上。最后使用 Flutter 插件启动应用以及显示隐私权政策。

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

其他资源

查看更多 Dart 相关的 codelab，请在 Dart 网站 上查看 codelabs 页面。

下面这些线上的课程也很不错：

• 使用 Dart 完整开发 Flutter 应用