Codelabs & workshops

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

Flutter workshops 与 codelabs 类似,但由讲师指导并始终使用 DartPad。 workshop 链接也会提供给你相关的 YouTube 视频,该视频会告诉你在哪里可以找到相关的 DartPad 链接。

适用于初级开发者

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

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

  • 编写你的第一个 Flutter App,第一部分
    你将完成一个简单的移动应用程序,它将具有为一个创业公司生成建议的公司名称的功能。在本节中,你将使用一个 package 并使用它生成的随机文字对创建一个无限滚动的列表。你也可以在 文档网站的 codelab 页面中 找到它。

  • 编写你的第一个 Flutter App,第二部分
    你将完成一个简单的移动应用程序,功能是:为一个创业公司生成建议的公司名称(第二部分)。在本节,你将在一个基础的 Flutter 应用里加入交互功能,同时创建第二个页面(Flutter 里称之为 route)用户可以进入这个页面。最终,你将可以修改应用的主题(配色)。

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

下一步

使用 Flutter 设计 UI

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

在 Flutter 应用中集成

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

测试

学习如何测试你的 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 桌面应用 已为 Windows 更新
    构建一个 Flutter 桌面应用以通过 GitHub APIs 来检索你的代码仓库 (repo),已分配的问题 (issue) 和拉取请求 (pull request)。本任务还有一部分内容,需要创建并使用插件,让原生 API 和桌面应用进行交互,并为 GitHub APIs 构建一个类型安全的客户端库。

其他资源

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

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