Contents
keyboard_arrow_down
keyboard_arrow_up
more_horiz
The Flutter codelabs provide a guided, hands-on coding experience. Some codelabs run in DartPad?no downloads required!
If you're new to Flutter, we recommend starting with one of the following codelabs:
Building your first Flutter app
(workshop)
An instructor-led version of our very popular "Write your first Flutter app" codelab (listed below).
Your first Flutter app
Create a simple app that automatically generates cool-sounding names, such as "newstay", "lightstream", "mainbrake", or "graypine". This app is responsive and runs on mobile, desktop, and web. (This also replaces the previous "write your first Flutter app" for mobile, part 1 and part 2 codelabs.)
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.
Learn about Material Design and basic Flutter concepts, like layout and animations:
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.
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.
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.
Take your Flutter app from boring to beautiful
Learn how to use some of the features in Material 3 to make your app more beautiful
and
more responsive.
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.
Adaptive Apps in Flutter
Learn how to build a Flutter app that adapts to the platform that it's running on, be that Android, iOS, the web, Windows, macOS, or Linux.
Building next generation UIs in Flutter
Learn how to build a Flutter app that uses the power of
flutter_animate
, fragment shaders, and particle fields. You will craft a user interface that evokes those science fiction movies and TV shows we all love watching when we aren't coding.
Learn how to use Flutter with other technologies.
Add sound and music to your Flutter game with SoLoud
?
NEW
The
SoLoud
package, a free and portable engine, delivers the low-latency and high-performance sound that's essential for many games. In this codelab, learn how to add SoLoud to your game.
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.
Adding WebView to your Flutter app
With the WebView Flutter plugin you can add a WebView widget to your Android or iOS Flutter app.
Build a 2D physics game with Flutter and Flame
?
NEW
This codelab guides you through crafting game mechanics in a Flutter and Flame game using a 2D physics simulation along the lines of Box2D, called
Forge2D
.
Build a word puzzle with Flutter
?
NEW
This codelab focuses on building word puzzle games, and dives into using Flutter's background processing to generate expansive crossword-style grids of interlocking words.
Build voice bots for mobile with Dialogflow and Flutter
(workshop)
An instructor-led version of the Dialogflow and Flutter codelab (listed below).
Build voice bots for Android with Dialogflow and Flutter
Learn how to build a mobile FAQ bot that can answer most common questions about the tool Dialogflow. End users can interact with the text interface or stream a voice interaction via the built-in microphone of a mobile device.
Introduction to Flame with Flutter
Build a Breakout clone using the Flame 2D game engine and embed it in a Flutter wrapper. You will use Flame's Effects to animate and remove components, along with the
google_fonts
and
flutter_animate
packages, to make the whole game look well designed.
Using FFI in a Flutter plugin
Learn how to use Dart's FFI (foreign function interface) library, ffigen, allowing you to leverage existing native libraries that provide a C interface.
Create haikus about Google products with the PaLM API and Flutter
Learn how to build an app that uses the PaLM API to generate haikus based on Google product names. The PaLM API gives you access to Google's state-of-the-art large language models.
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.
Learn how to write code that's targeted for specific platforms, like iOS, Android, desktop, or the web.
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
Finish an app that reports the number of stars on a GitHub repository. Use Dart/Flutter 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.
Write a Flutter desktop application
Build a Flutter desktop app (Windows, Linux, or macOS) 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.
Adding a Home Screen widget to your Flutter app
Learn how to add a Home Screen widget to your Flutter app on iOS. This applies to your home screen, lock screen, or the today view.
For Dart-specific codelabs, see the
codelabs
page on the
Dart site
.
We also recommend the following online class: