Codelabs

Flutter编码实验室提供了指导性的动手编码体验. 一些代码实验室在DartPad中运行-无需下载!

Write your first Flutter app, part 1

创建一个简单的移动应用程序,为初创公司生成建议的名称. 在第1部分中,您将使用一个程序包,该程序包随机返回成对的单词,并将其插入无限滚动列表中. 您还可以在flutter.dev上找到此代码实验室 .

Write your first Flutter app, part 2

创建一个简单的移动应用程序,为初创公司生成建议的名称. 在第二部分中,您将从第1部分开始扩展示例,以允许用户选择收藏的单词对,并添加第二个"已保存的收藏"页面,用户可以在其中查看所选名称. 最后,您将更改应用程序的主题颜色.

Write your first Flutter app on the web

在DartPad中实现一个简单的Web应用程序(无需下载!),该应用程序显示一个包含三个文本字段的登录屏幕. 当用户填写字段时,进度栏会沿登录区域的顶部进行动画显示. 该代码实验室是专门为网络编写的,但是如果您已经下载并配置了Android和iOS工具,则完整的应用程序也可以在Android和iOS设备上运行.

Basic Flutter layout concepts

在浏览器中使用DartPad(无需下载!),了解创建Flutter布局的基础知识.

Building beautiful UIs with Flutter

比"编写第一个Flutter应用程序"更深入的"第一次潜水". 在此代码实验室中,您将创建一个包含简单动画的聊天应用程序,并自定义iOS和Android的UI.

Implicit animations

使用DartPad(无需下载!)来学习如何使用隐式动画为UI中的小部件添加动作并创建视觉效果.

Adding Google Maps to a Flutter app

在应用程序中显示Google地图,从Web服务检索数据,并将数据显示为地图上的标记.

Build a photo sharing app with Google Photos and Flutter

构建一个实地考察应用程序,使您和旅程的其他成员共享照片.

Building a Cupertino app with Flutter

使用Cupertino软件包构建Shrine购物应用程序的版本(在Material Design代码实验室中使用),以创建iOS风格的外观. 创建多个选项卡并在它们之间导航. 使用提供程序包来管理屏幕之间的状态.

Firebase for Flutter

将Flutter应用程序连接到Firebase数据库,并使用事务更新共享信息.

MDC 101 Flutter: Material Components (MDC) Basics

通过使用核心组件构建一个简单的应用程序,学习使用材料组件的基础知识. 四个MDC代码实验室将指导您构建一个名为Shrine的电子商务应用程序. 您将从使用MDC Flutter的多个组件构建登录页面开始.

MDC 102 Flutter: Material Structure and Layout

了解如何在Flutter中将Material用于结构和布局. 通过添加导航,结构和数据,继续构建MDC-101中引入的电子商务应用程序.

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

了解Flutter的材料组件如何使您的产品脱颖而出,并通过设计表达您的品牌. 通过添加显示产品的主屏幕,继续构建您的电子商务应用程序.

MDC 104 Flutter: Material Advanced Components

改善您的设计并学习使用我们的高级组件背景菜单. 通过添加带有菜单的菜单来完成您的电子商务应用程序,该菜单可以按所选类别过滤产品.


有关Dart特定的代码实验室,请参见Dart网站上的代码实验室页面.

Other resources