Add-to-app

Recommended approaches for adding Flutter to existing apps.

Android splash screen

A Flutter sample app that exemplifies how to implement an animated splash screen for Android devices.

iOS app clip

A sample project demonstrating integration with iOS App Clip.

Swift platform view

A Flutter sample app that combines a native iOS UIViewController with a full-screen Flutter view.

Simplistic editor

This sample text editor showcases the use of TextEditingDeltas and a DeltaTextInputClient to expand and contract styled ranges of text.

Your first Flutter app workshop

An instructor-led version of our very popular 'Write your first Flutter app' codelab.

Your first Flutter app

Create a simple random-name generator app. This app is responsive and runs on mobile, desktop, and web.

Records and Patterns in Dart

Discover Dart 3's new records and patterns features. Learn how you can use them in a Flutter app to help you write more readable and maintainable Dart code.

Animations in Flutter

Learn how to build animated effects in Flutter. You'll learn how to build implicit and explicit animations, and customize navigation transition animations the animations package and predictive back on Android.

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.

How to debug layout issues with the Flutter Inspector

Step-by-step instructions on how to debug common layout problems using the Flutter Inspector and Layout Explorer.

MDC-101 - Material Components (MDC) Basics

Learn the basics of using Material Components by building a simple app with core components.

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

MDC-104 - Material Advanced Components

Improve your design and learn to use our advanced component backdrop menu.

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.

Adding an AdMob banner and native inline ads to a Flutter app

Learn how to implement inline banner and native ads to a travel booking app that lists possible flight destinations.

Adding in-app purchases to your Flutter app

Extend a simple gaming app that uses the Dash mascot as currency to offer three types of in-app purchases: consumable, non-consumable, and subscription.

Add a user authentication flow using FirebaseUI

Learn how to add Firebase authentication to a Flutter app with only a few lines of code.

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.

Notifications with Firebase Cloud Messaging

Learn how to develop a multi-platform app with Flutter and Firebase Cloud Messaging, integrating FCM to send and receive messages on Android, iOS, and web.

Build a word puzzle with Flutter

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.

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.

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.

Quickstart

Command-line app

A command line app that parses command-line options and fetches from GitHub.

Quickstart

Extension methods

Demonstrates Dart's extensions method syntax.

Quickstart

FFI

A series of simple examples demonstrating how to call C libraries from Dart.

Quickstart

Isolates (in a CLI)

Command line applications that demonstrate how to work with Concurrency in Dart using isolates.

Quickstart

Native Dart app

A command line application that can be compiled to native code using `dart compile exe`.

Quickstart

Server side Dart

Examples of running Dart on the server.

Quickstart

Package constraint solver

Demonstrates best-practices for publishing packages on pub.dev.

Recipe

Animate a page route transition

Transition between routes by animating the new route into view from the bottom of the screen.

Recipe

Animate a widget using a physics simulation

Learn how to move a widget from a dragged point back to the center using a spring simulation.

Recipe

Animate the properties of a container

Use AnimatedContainer to animate the size, background color, and border radius of a Container.

Recipe

Fade a widget in and out

The AnimatedOpacity widget makes it easy to perform opacity animations.

Recipe

Add a drawer to a screen

Use the Drawer widget in combination with a Scaffold to create a layout with a Material Design drawer.

Recipe

Display a snackbar

Use the Snackbar widget to display messages to your users.

Recipe

Export fonts from a package

Use a font across multiple apps.

Recipe

Update the UI based on orientation

Build a list that displays two columns in portrait mode and three columns in landscape mode.

Recipe

Use a custom font

Apply fonts to your entire app or individual widgets.

Recipe

Work with tabs

Working with tabs is a common pattern in mobile apps that follow the Material Design or Cupertino guidelines.

Recipe

Create a download button

Build a download button that transitions through multiple visual states, based on the status of an app download.

Recipe

Create a nested navigation flow

Create top level routes, and routes nested below specific widgets.

Recipe

Create a scrolling parallax effect

Create the parallax effect by building a list of cards with images that 'move'.

Recipe

Create a shimmer loading effect

Communicate that data is loading with a chrome color shimmer on the screen.

Recipe

Create a staggered menu animation

Build a drawer menu with animated content that is staggered and has a button that pops in at the bottom

Recipe

Create a typing indicator

Build a speech bubble typing indicator that animates in and out of view.

Recipe

Create an expandable FAB

Create a floating action button that spawns other action buttons.

Recipe

Drag a UI element

Build a drag-and-drop interaction when the user long presses.

Recipe

Build a form with validation

Learn how to add validation to a form.

Recipe

Create and style a text field

In this recipe, explore how to create and style text fields.

Recipe

Focus and text fields

Shift focus to a text field programmatically.

Recipe

Handle changes to a text field

Listen for changes to a TextField using a callback.

Recipe

Retrieve the value of a text field

Learn how to retrieve the text a user has entered into a text field.

Recipe

Add achievements and leaderboards to your game

Use the games_services package to add leaderboard functionality to your mobile game.

Recipe

Add multiplayer support to your Flutter game

Use the cloud_firestore package to implement multiplayer capabilities in your game.

Recipe

Add ads to your Flutter game

Use the google_mobile_ads package to add a banner ad to your app or game.

Recipe

Add Material touch ripples

Use the Inkwell widget to display a ripple animation.

Recipe

Handle taps

Use the GestureDetector widget to respond to fundamental actions, such as tapping and dragging.

Recipe

Implement swipe to dismiss

Learn how to use the Dismissible widget.

Recipe

Display images from the internet

To work with images from a URL, use the Image.network() constructor.

Recipe

Fade in images with a placeholder

Use the FadeInImage widget to show a visual placeholder before an image loads.

Recipe

Grid lists

Learn to use a GridView widget.

Recipe

Horizontal lists

Learn to display items horizontally in a scrollable list.

Recipe

Lists with different types of items

Create a list with headers followed by a few list items.

Recipe

Lists and floating app bars

Place a floating app bar or navigation bar above a list.

Recipe

Basic lists

Learn to display items with the ListView widget.

Recipe

Long lists

Work with longer lists with the Listview.builder constructor.

Recipe

Lists with spaced items

Create a list with padding between items.

Recipe

Animate a widget across screens

Use the Hero widget to animate a widget from one screen to the next.

Recipe

Navigate to a new screen and back

This recipe uses the Navigator to navigate to a new route.

Recipe

Named routes

Create named routes and navigate to them.

Recipe

Arguments and named routes

Pass arguments to a named route and read the arguments on that route.

Recipe

Android app links

Set up deep linking on Android

Recipe

iOS universal links

Set up universal links for iOS

Recipe

Return data from a screen

Return data from one screen to another with the Navigator.pop method.

Recipe

Send data to a new screen

Send data from one screen to new one.

Recipe

Fetch data from the internet

Learn to use HTTP in your app.

Recipe

Make authenticated requests

Authorization headers in HTTP

Recipe

Send data to the internet

Send HTTP POST requests in your app.

Recipe

Update data over the internet

Send an HTTP put request.

Recipe

Delete data on the internet

Send an HTTP delete request.

Recipe

WebSockets

Connect to and communicate with a websocket.

Recipe

Parse JSON in the background

Learn to use Dart's Isolate objects

Recipe

Persist data with SQLite

Use the sqflite package.

Recipe

Read and write files

Use the dart:io library and path_provider plugin to save files to disk.

Recipe

Store key-value data on disk

Persist data with shared_preferences

Recipe

Play and pause a video

Play videos stored on the file system, as an asset, or from the internet.

Recipe

Use the camera

Learn to use a devices camera.

Recipe

Report errors to a service

Report errors to Sentry crash reporting.

Recipe

Performance profiling

Write a test that records a performance timeline.

Recipe

Write unit tests

An introduction to writing unit tests.

Recipe

Write widget tests

An introduction to writing widget tests.

Recipe

Mock dependencies in tests

The basics of mocking with the Mockito package.

Recipe

Find widgets in tests

This recipe looks at the 'find' constant provided by the flutter_test package.

Recipe

Handle scrolling

Learn how to scroll in widget tests.

Recipe

App orientation

Learn how to check app orientation in widget tests.

Recipe

Tap, drag, and enter text

Interact with widgets in widget tests.

Recipe

Persistent storage architecture - SQL

Save complex application data to a user's device with SQL.

Recipe

Error handling with Result objects

Improve error handling across classes with Result objects.

Recipe

Optimistic state

Improve the perception of responsiveness of an application by implementing optimistic state.

Recipe

Offline First

Implement offline-first support for one feature in an application.

Recipe

Persistent storage architecture - Key-value data

Save application data to a user's on-device key-value store.

Recipe

Command pattern

Simplify view model logic by implementing a Command class.

Asset transformation

Demonstrates how to transform images' color scales and formats.

Background isolate channels

Demonstrates how to use long-lived isolates.

Code sharing

Demonstrates how to share business logic between a Flutter client and Dart server using `package:shelf`.

Context menus

This sample shows how to create and customize cross-platform context menus, such as the text selection toolbar on mobile or the right click menu on desktop.

Desktop UI

Demonstrates desktop features in both Material and FluentUI design systems.

AI generated dynamic theme

Demonstrates how to call on-device Flutter APIs based on output from the Gemini API.

Form app

A sample demonstrating different types of forms and best practices.

AI todo list

A developer sample written in Flutter demonstrating how to interact with a to-do list in natural language using the Gemini API.

Google Maps plugin

Demonstrates the Google Maps for Flutter plugin.

Infinite list

A Flutter sample app that shows an implementation of the 'infinite list' UX pattern.

Isolates

A sample application that demonstrate best practices when using isolates.

Navigation and routing

A sample that shows how to use `go_router` API to handle common navigation scenarios.

Google Maps Flutter plugin

A sample place tracking app that uses the google_apps_flutter plugin.

Platform adaptive design

This sample project shows a Flutter app that maximizes application code reuse while adhering to different design patterns on Android and iOS.

Counter app with Provider

The starter Flutter application, but using the Provider package to manage state.

Shopping app with Provider

A Flutter sample app that shows a state management approach using the Provider package.

Simple shaders

A simple Flutter fragment shaders project.

Desktop calculator

A calculator sample to demonstrate a simple start for a desktop Flutter app.

Testing app

A sample app that shows different types of testing in Flutter.

Web element embedding

Modifies the index.html of a flutter app so it is launched in a custom hostElement. This is the most basic embedding example.

ng-flutter

A simple Angular app (and component) that replicates the element embedding example, but in an Angular app.

Platform channels

A sample Flutter app which demonstrates how to use `MethodChannel`, `EventChannel`, `BasicMessageChannel` and `MessageCodec`.