- Write your first Flutter app, part 1
- Write your first Flutter app, part 2
- Write your first Flutter app on the web
- Basic Flutter layout concepts
- Building beautiful UIs with Flutter
- Implicit animations
- Adding Google Maps to a Flutter app
- Build a photo sharing app with Google Photos and Flutter
- Building a Cupertino app with Flutter
- Firebase for Flutter
- MDC 101 Flutter: Material Components (MDC) Basics
- MDC 102 Flutter: Material Structure and Layout
- MDC 103 Flutter: Material Theming with Color, Shape, Elevation, and Type
- MDC 104 Flutter: Material Advanced Components
- Other resources
The Flutter codelabs provide a guided, hands-on coding experience. Some codelabs run in DartPad—no downloads required!
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.
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.
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.
Use DartPad in a browser (no downloads required!) to learn the basics of creating a Flutter layout.
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.
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.
Display a Google map in an app, retrieve data from a web service, and display the data as markers on the map.
Build a field trip app that allows you and other members of the trip to share photos.
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.
Connect a Flutter app to a Firebase database, and use a transaction to update shared information.
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.
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.
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.
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.