The Flutter codelabs provide a guided, hands-on coding experience. Some codelabs run in DartPad—no downloads required!
Good for beginners
If you’re new to Flutter, we recommend starting with one of these codelabs:
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.
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.
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.
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.
Designing a Flutter UI
Learn about Material Design and basic Flutter concepts, like layout and animations:
Basic Flutter layout concepts
Use DartPad in a browser (no downloads required!) to learn the basics of creating a Flutter layout.
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.
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.
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 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 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 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 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.
Using Flutter with…
Learn how to use Flutter with other technologies.
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.
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.
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.
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.
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.
Learn how to test your Flutter application.
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
Learn how to write code that’s targeted for specific platforms, like iOS, Android, the web, and the desktop.
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.
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.
Using a plugin with a Flutter web app
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.
We also recommend the following online class: