Codelabs

目录

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

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

编写你的第一个 Flutter App，第一部分

Write your first Flutter app, part 1

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

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，第二部分

Write your first Flutter app, part 2

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

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 应用

Write your first Flutter app on the web

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

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 布局基础要点

Basic Flutter layout concepts

待更新，建议暂时跳过。比编写你的第一个 Flutter App 略复杂一些，本节你将会创建一个简单的聊天应用，并为 iOS 和 Android 制定 UI 界面。

Use DartPad in a browser (no downloads required!) to learn the basics of creating a Flutter layout.

使用 Flutter 创建精美的 UI

Building beautiful UIs with Flutter

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

A deeper “first dive” than “Write your first Flutter app.” In this codelab you’ll create a chat app that includes a simple animation, and customizes the UI for iOS and Android.

渐变动画

Implicit animations

使用 DartPad 学习如果创建渐变动画。

Use DartPad (no downloads required!) to learn how to use implicit animations to add motion and create visual effects for the widgets in your UI.

在 Flutter 应用中添加谷歌地图

Adding Google Maps to a Flutter app

在应用里显示谷歌地图，接收网络传回的数据，在地图上显示一个标示。

Display a Google map in an app, retrieve data from a web service, and display the data as markers on the map.

使用 Google Photos API 制作一个照片分享的 Flutter 应用

Build a photo sharing app with Google Photos and Flutter

构建一个旅行应用场景下的应用，帮助你和其他成员分享照片。

Build a field trip app that allows you and other members of the trip to share photos.

使用 Flutter 构建 iOS 风格的应用

Building a Cupertino app with Flutter

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

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 里使用 Firebase

Firebase for Flutter

学习如何在 Flutter 里使用 Firebase 实时数据库的功能，以及如何使用事物 (transaction) 同时更新不同设备里的信息。

Connect a Flutter app to a Firebase database, and use a transaction to update shared information.

MDC Flutter 教程 1：Material 组件基础

MDC 101 Flutter: Material Components (MDC) Basics

学习使用 Material 核心组件构建一个简单的应用。我们最终会构建一个售卖衣服和家居的电子商务应用－ Shrine，本节将从一个简单的登陆页面开始帮助你在 Flutter 上使用 Material 组件。

Learn the basics of using Material Components by building a simple app with core components. The four MDC codelabs guide you through building an e-commerce app called Shrine. You’ll start by building a login page using several of MDC Flutter’s components.

MDC Flutter 教程 2：Material 组件结构和布局

MDC 102 Flutter: Material Structure and Layout

学习如何在 Flutter 中使用 Material 样式的结构和布局。通过添加导航、结构和数据，继续构建那个电子商务应用－ Shrine。

Learn how to use Material for structure and layout in Flutter. Continue building the e-commerce app, introduced in MDC-101, by adding navigation, structure, and data.

MDC Flutter 教程 3：Material 组件主题、形状、阴影和类型

MDC 103 Flutter: Material Theming with Color, Shape, Elevation, and Type

探寻如何通过 Flutter Material 组件让你的产品更出众，并通过你的设计传达产品的品牌。我们会为我们的电子商务应用加入一个首页展现所有的产品。

Discover how Material Components for Flutter make it easy to differentiate your product, and express your brand through design. Continue building your e-commerce app by adding a home screen that displays products.

MDC Flutter 教程 4：Material 组件进阶

MDC 104 Flutter: Material Advanced Components

改进设计并学习如何使用高级的组件 - backdrop 菜单。本期我们将通过加入一个全屏（backdrop）样式的菜单，用于分类显示你的产品。至此我们就结束了这个电子商务应用的构建。

Improve your design and learn to use our advanced component backdrop menu. Finish your e-commerce app by adding a backdrop with a menu that filters products by the selected category.

查看所有的 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 相关的 codelabs，可以在 Dart 文档网站 的 codelabs 页面获得。

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

其他资源

Other resources