---
url: /develop/flutter.md
description: >-
  A framework for building beautiful, natively compiled applications from a
  single codebase. Support is available for Material Design 3.
---

# Flutter

A framework for building beautiful, natively compiled applications from a single codebase. Support is available for Material Design 3.

![Flutter](/assets/72af664a-mrod31eo-flutter.DODdfXHa.webp)

## Material 3 Widget catalog

Flutter supports original M3 components. M3 Expressive is not available on Flutter.

::: tip Do
[![](/assets/236d1afc-mo9jsob5-flutter1.DlCu0uEE.webp)](https://docs.flutter.dev/ui/widgets/material)

The Flutter team is currently working on Material Design 3 support for Material Components.
:::

## Resources & documentation

Guides, developer docs, tutorials, and more

::: tip Do
[![](/assets/dae7468b-mo9nhpyl-flutter6.IsP0Q2qA.webp)](https://flutter.dev/)

Google's UI toolkit for building beautiful, natively compiled applications from a single codebase.
:::

::: tip Do
[![](/assets/09e1e836-mqrr8uzt-github_brown_icon.Bq5Mayhe.webp)](https://github.com/flutter/flutter/issues/91605)

Umbrella tracking issue for all past and future engineering work on Flutter support for Material 3.
:::

::: tip Do
[![](/assets/528a0fa1-mo9ndlqu-flutter5.DsE67J_n.webp)](https://api.flutter.dev/flutter/material/ThemeData/useMaterial3.html)

Set ThemeData.useMaterial3 to true for updated components and to apply new typography, color, elevation, and more.
:::

::: tip Do
[![](/assets/23e97a52-mo9ncc2z-flutter4.CEisSHZ5.webp)](https://codelabs.developers.google.com/codelabs/mdc-101-flutter)

Step-by-step codelab on how to apply Material 3 in your Flutter app.
:::

::: tip Do
[![](/assets/23e97a52-mo9ncc2z-flutter4.CEisSHZ5.webp)](https://codelabs.developers.google.com/codelabs/flutter-animated-responsive-layout#0)

Start with an empty Flutter app and build out a fully styled and animated application using Material 3 with Flutter.
:::

::: tip Do
[![](/assets/23e97a52-mo9ncc2z-flutter4.CEisSHZ5.webp)](https://www.youtube.com/watch?v=7nrhTdS7dHg)

What to prioritize when building a responsive UI experience.
:::

::: tip Do
[![](/assets/79948d83-mqrtuupe-youtube_icon_brown.oGigRJmP.webp)](https://www.youtube.com/watch?v=7nrhTdS7dHg)

Learn how to build the Basil Material study in Flutter with advanced theming techniques that support multiple device contexts.
:::

::: tip Do
[![](/assets/432d0e59-mo9o8rmy-flutter10.BBCLXxzh.webp)](https://pub.dev/packages/flutter_adaptive_scaffold)

See how to build an adaptive, responsible application using Material 3 canonical layouts with the adaptive_scaffold package.
:::

::: tip Do
[![](/assets/6cfc5b09-mqrtx1w6-wonderous.BZMNwShc.webp)](https://flutter.gskinner.com/wonderous/)

Wonderous pushes visual fidelity, effects, and transitions to showcase Flutter capabilities on modern mobile hardware.
:::