Codelabs
Flutter 的 codelabs 是一份为新手准备的入门指南。一些 codelabs 运行在 DartPad—上,这意味着你不需要下载任何东西就能够轻松学习。
The Flutter codelabs provide a guided, hands-on coding experience. Some codelabs run in DartPad—no downloads required!
适用于初级开发者
Good for beginners
如果你刚开始学习 Flutter,我们推荐你学习下面的 Codelab 之一:
If you’re new to Flutter, we recommend starting with one of these codelabs:
-
编写你的第一个 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.
使用 Flutter 设计 UI
Designing a Flutter UI
了解 Material Design 和 Flutter基本概念,例如布局和动画:
Learn about Material Design and basic Flutter concepts, like layout and animations:
-
Flutter 布局基础要点
在网页浏览器里使用 DartPad 学习基础的 Flutter 布局知识。Basic Flutter layout concepts
Use DartPad in a browser (no downloads required!) to learn the basics of creating a Flutter layout. -
如何使用 Flutter Inspector 调试布局
(非官方产出的 codelab) 手把手的介绍如何使用 Flutter Inspector 和 Layout Explorer 调试一些常见的布局问题。How to debug layout issues with the Flutter Inspector
Not an official codelab, but step-by-step instructions on how to debug common layout problems using the Flutter Inspector and Layout Explorer. -
渐变动画
使用 DartPad 学习如果创建渐变动画。Implicit animations
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. -
使用 Material Motion 为 Flutter 构建精美的过渡动画
了解如何使用 Material animations package 为名叫 Reply 的 Material 应用添加预构建的过渡。Building Beautiful Transitions with Material Motion for Flutter
Learn how to use the Material animations package to add pre-built transitions to a Material app called Reply. -
MDC Flutter 教程 1:Material 组件基础
学习使用 Material 核心组件构建一个简单的应用。我们最终会构建一个售卖衣服和家居的电子商务应用- Shrine,本节将从一个简单的登陆页面开始帮助你在 Flutter 上使用 Material 组件。MDC 101 Flutter: Material Components (MDC) Basics
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。MDC 102 Flutter: Material Structure and Layout
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 组件让你的产品更出众,并通过你的设计传达产品的品牌。我们会为我们的电子商务应用加入一个首页展现所有的产品。MDC 103 Flutter: Material Theming with Color, Shape, Elevation, and Type
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)样式的菜单,用于分类显示你的产品。至此我们就结束了这个电子商务应用的构建MDC 104 Flutter: Material Advanced Components
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 应用中集成
Using Flutter with…
学习如何使用在 Flutter 中使用其他技术产品/平台:
Learn how to use Flutter with other technologies.
-
在 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 应用加入 AdMob
为一个名叫 Awesome Drawing Quiz 的小游戏加入 AdMob 标语广告、插页式广告和奖励广告。这是一个看图猜字的游戏。Adding AdMob Ads to a Flutter app
Learn how to add an AdMob banner, an interstitial ad, and a rewarded ad to an app called Awesome Drawing Quiz, a game that lets players guess the name of the drawing. -
[在 Flutter 里使用 Firebase][Firebase for Flutter]
学习如何在 Flutter 里使用 Firebase 实时数据库的功能,以及如何使用事物 (transaction) 同时更新不同设备里的信息。Get to know Firebase for Flutter
Build an event RSVP and guestbook chat app on both Android and iOS using Flutter, authenticating users with Firebase Authentication and sync data using Cloud Firestore. -
[使用 Cloud Firestore 和 Flutter 构建一个多平台应用][]
构建一个多平台的餐馆推荐应用,只需要一套 Dart 代码,就可以运行在 Android、iOS 和 Web 平台。Multi-platform Firestore Flutter
Build a multi-platform restaurant recommendation app powered by Flutter and Cloud Firestore. The finished app runs on Android, iOS, and web, from a single Dart codebase.
测试
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: