Codelabs & workshops

Contents

The Flutter codelabs provide a guided, hands-on coding experience. Some codelabs run in DartPad—no downloads required!

Flutter workshops are similar to the codelabs, but are instructor led and always use DartPad. The provided workshop link takes you to the relevant YouTube video, which tells you where to find the associated DartPad link.

Good for beginners

If you’re new to Flutter, we recommend starting with one of these codelabs:

  • Building your first Flutter app (workshop) NEW!
    An instructor-led version of our very popular “Write your first Flutter app, part 1” codelab (listed below).

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

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.

Testing

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

  • 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

For Dart-specific codelabs, see the codelabs page on the Dart site.

We also recommend the following online class: