Flutter learning resources

Showing 0 / 0

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.

Codelab

Scrolling experiences in Flutter

Start with an app that performs simple, straightforward scrolling and enhance it to create fancy and custom scrolling effects by using slivers.

Codelab

Take your Flutter app from boring to beautiful

Learn how to use some of the features in Material 3 to make your app beautiful and responsive.

Codelab

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.

Codelab

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.

Codelab

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.

Codelab

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.

Codelab

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.

Codelab

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.

Codelab

MDC-101 - Material Components (MDC) Basics

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

Codelab

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.

Codelab

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.

Codelab

MDC-104 - Material Advanced Components

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

Codelab

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.

Codelab

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.

Codelab

Add a user authentication flow using FirebaseUI

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

Codelab

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.

Codelab

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.

Codelab

Add sound and music to your Flutter game with SoLoud

The SoLoud package, a free and portable engine, delivers the low-latency and high-performance sound that's essential for many games.

Codelab

Build a 2D physics game with Flutter and Flame

This codelab guides you through crafting game mechanics in a Flutter and Flame game using a 2D physics simulation called Forge2D.

Codelab

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.

Codelab

Introduction to Flame with Flutter

Build a Breakout clone using the Flame 2D game engine and embed it in a Flutter wrapper.

Codelab

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.

Codelab

Adding WebView to your Flutter app

With the WebView Flutter plugin you can add a WebView widget to your Android or iOS Flutter app.

Codelab

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.

Codelab

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.

Codelab

Write a Flutter desktop application

Build a Flutter desktop app (Windows, Linux, or macOS) that accesses GitHub APIs, and create and use plugins to interact with native APIs and desktop applications.

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 the properties of a container

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

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

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

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.

Quickstart

Asset transformation

Demonstrates how to transform images' color scales and formats.

Quickstart

Background isolate channels

Demonstrates how to use long-lived isolates.

Quickstart

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.

Quickstart

Desktop UI

Demonstrates desktop features in both Material and FluentUI design systems.

Quickstart

AI generated dynamic theme

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

Quickstart

Form app

A sample demonstrating different types of forms and best practices.

Quickstart

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.

Quickstart

Google Maps plugin

Demonstrates the Google Maps for Flutter plugin.

Quickstart

Infinite list

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

Quickstart

Isolates

A sample application that demonstrate best practices when using isolates.

Quickstart

Google Maps Flutter plugin

A sample place tracking app that uses the google_apps_flutter plugin.

Quickstart

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.

Quickstart

Counter app with Provider

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

Quickstart

Shopping app with Provider

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

Quickstart

Simple shaders

A simple Flutter fragment shaders project.

Quickstart

Desktop calculator

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

Quickstart

Testing app

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

Quickstart

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.

Quickstart

ng-flutter

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

Quickstart

Platform channels

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

Flutter learning resources

Subject

Type