Codelabs & workshops

目录

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

The Flutter codelabs provide a guided, hands-on coding experience. Some codelabs run in DartPad—no downloads required!

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

Flutter workshops are similar to the codelabs, but are instructor led and always use DartPad. The provided workshop link takes you to the relevant YouTube video, which tells you where to find the associated DartPad link.

适用于初级开发者

Good for beginners

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

If you’re new to Flutter, we recommend starting with one of these codelabs:

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

    Building your first Flutter app (workshop) NEW!
    An instructor-led version of our very popular “Write your first Flutter app, part 1” codelab (listed below).

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

    Write your first Flutter app, part 1
    Create a simple mobile app that generates proposed names for a startup company. In part one, you’ll use a package that returns pairs of words at random and inserts them into an infinite scrolling list. You can also find this codelab on flutter.dev.

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

    Write your first Flutter app, part 2
    Create a simple mobile app that generates proposed names for a startup company. In part two, you’ll extend the example from part 1 to allow the user to select favorite word pairs, and add a second “Saved Favorites” page where users can view the selected names. Finally, you’ll change the app’s theme color.

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

    Write your first Flutter app on the web
    Implement a simple web app in DartPad (no downloads required!) that displays a sign-in screen containing three text fields. As the user fills out the fields, a progress bar animates along the top of the sign-in area. This codelab is written specifically for the web, but if you have downloaded and configured Android and iOS tooling, the completed app works on Android and iOS devices, as well.

  • 使用 Flutter 创建精美的 UI
    这将是一次“深入探索”，而不是 Flutter 的“入门级教程”。在本篇 codelab 中，你将会编写一个聊天应用，其中将包括简单的动画，以及在 iOS 和 Android 上自定义 UI 等内容。

    Building beautiful UIs with Flutter
    A deeper “first dive” than “Write your first Flutter app.” Create a chat app that includes a simple animation, and customizes the UI for iOS and Android. As part of this codelab, learn how to use keyboard shortcuts in Android Studio.

下一步

Next steps

使用 Flutter 设计 UI

Designing a Flutter UI

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

Learn about Material Design and basic Flutter concepts, like layout and animations:

在 Flutter 应用中集成

Using Flutter with…

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

Learn how to use Flutter with other technologies.

测试

Testing

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

Learn how to test your Flutter application.

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

    How to test a Flutter app
    Start with a simple app that manages state with the Provider package. Unit test the provider package. Write widget tests for two of the widgets. Use Flutter Driver to create an integration test.

撰写平台特别的代码

Writing platform-specific code

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

Learn how to write code that’s targeted for specific platforms, like iOS, Android, the web, and the desktop.

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

    Building a Cupertino app with Flutter
    Build a version of the Shrine shopping app (used in the Material Design codelabs) using the Cupertino package to create an iOS style look and feel. Create multiple tabs and navigate between them. Use the provider package to manage state between screens.

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

    How to write a Flutter plugin
    Learn how to write a plugin by creating a music plugin for iOS and Android that processes audio on the host platform. Then make an example app that uses your plugin to make a music keyboard.

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

    Using a plugin with a Flutter web app
    Finish an app that reports the number of stars on a GitHub repository. use Dart DevTools to do some simple debugging, and Host your app on Firebase and, finally, use a Flutter plugin to launch the app and open the hosted privacy policy.

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

    Write a Flutter desktop application
    Build a Flutter desktop app that accesses GitHub APIs to retrieve your repositories, assigned issues, and pull requests. As part of this task, create and use plugins to interact with native APIs and desktop applications, and use code generation to build type-safe client libraries for GitHub’s APIs.

其他资源

Other resources

查看所有的 Flutter Codelab，请在 Google Developers Codelabs 网站 里查看：Flutter 分类 的内容，或者打开 中文的 Flutter codelabs 网站 查阅更多。

For a full list of available Flutter codelabs, see the Flutter category on Google Developers. If the previous link doesn’t work, try this mirror of the Flutter codelabs.

Dart 相关 codelabs

为 Java 开发人员准备的 Dart 教程

只要一个浏览器就可以完成这个 codelab，体验使用线上的 DartPad 来学习 Dart 吧！

Use DartPad (no download required!) to explore how Dart makes writing modern apps easy and fun.

Dart 速查表

使用最新体验版的 DartPad 完成这个 codelab，用交互的形式学习（或回顾）Dart 的独特之处。

Use the latest, experimental version of DartPad to learn, remind yourself about, or test your knowledge of some of the most commonly used, yet unique features of the Dart language.

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

For Dart-specific codelabs, see the codelabs page on the Dart site.

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

We also recommend the following online class: