Flutter 布局基础教程

在线使用 DartPad 来进行 Flutter 布局的学习。

Use DartPad in a browser (no need to download Flutter or Dart!) to learn the basics of creating a Flutter layout.

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

你将完成一个简单的移动应用程序,功能是:为一个创业公司生成建议的公司名称(第一部分)。本节里,你将会着手创建一个简单的 Flutter 应用,无需 Dart 语言和移动开发语言经验,只需你具备面向对象语言开发基础(如变量,循环和条件语句)即可。

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.

编写你的第一个 Flutter App,第二部分

你将完成一个简单的移动应用程序,功能是:为一个创业公司生成建议的公司名称(第二部分)。在本节,你将在一个基础的 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 构建精美的 UI

待更新,建议暂时跳过。比编写你的第一个 Flutter App 略复杂一些,本节你将会创建一个简单的聊天应用,并为 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.


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

Use DartPad to learn how to use implicit animations to add motion and create visual effects for the widgets in your UI.

在 Flutter 应用中添加谷歌地图


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 field trip app that allows you and other members of the trip to share photos.

使用 Flutter 构建 iOS 风格的应用

构建 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

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

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

MDC Flutter 教程 1:Material 组件基础

学习使用 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 组件结构和布局

学习如何在 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 组件主题、形状、阴影和类型

探寻如何通过 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 组件进阶

改进设计并学习如何使用高级的组件 - 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