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 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.

Next steps


Designing a Flutter UI


Learn about Material Design and basic Flutter concepts, like layout and animations:

Using Flutter with ...


Learn how to use Flutter with other technologies.

Monetizing Flutter


Flutter and Firebase


Build games with Flutter

  • Add sound and music to your Flutter game with SoLoudNEW
    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.

  • Build a 2D physics game with Flutter and FlameNEW
    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 FlutterNEW
    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.

  • 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.

Flutter and TensorFlow


Flutter and other technologies




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, desktop, or the web.

  • 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.