Material Design 3 is Google's current design system — a mature, expressive, and accessible framework for building cross-platform interfaces. As of 2026, M3 is firmly the default for new Flutter projects, and FlutterFlow has deepened its support for it considerably. If you're starting a new FlutterFlow app today, building on M3 from day one isn't just good practice — it's the expected baseline.
FlutterFlow theme widgets remain one of the most practical tools in the builder. They enforce visual consistency across your app and mean that a single change — to a colour, radius, or elevation — propagates everywhere that widget is used. No hunting through screens, no accidental mismatches. For a team or a solo builder working at speed, this matters.
Buttons are a great place to start. They're used everywhere, they carry a lot of visual weight, and M3 introduced meaningful changes to the button family that are worth understanding before you build anything.
TL:DR – FlutterFlow supports Material 3 well in 2026, with improved theming tools and a more complete design system integration. Setting up M3 buttons as theme widgets is still a manual process, but it's fast and pays dividends throughout your build. This article walks through the button family, how to configure each one as a theme widget, and what's changed recently.
Contents
Theme settings improvements
When this article was first written, M3 support in FlutterFlow was present but required more workarounds. Since then, FlutterFlow has significantly expanded its design system tooling. The Theme Settings panel is more capable, colour scheme generation from a seed colour is better integrated, and the overall workflow for creating and managing theme widgets has been streamlined.
Importantly, FlutterFlow's design system now aligns more closely with Flutter's own Material 3 implementation. That means the theme tokens you configure — shape, colour roles, typography scale — map more predictably to what Flutter actually renders. If you've been working from an older project that predates these changes, it's worth auditing your theme widgets to make sure they reflect current M3 specifications rather than a hybrid of M2 and M3 conventions.
The button specifications themselves haven't changed dramatically on the M3 side — Google's guidelines are stable — but the way you wire them up in FlutterFlow is cleaner and more reliable than it was in earlier versions of the builder.
M2 vs M3 buttons
If you're coming from M2, the differences are immediately visible. M3 buttons have fully rounded corners, revised elevation behaviour, updated colour roles, and use sentence-case labels. They're taller and feel more considered. Placed side by side, M2 buttons look like a different era of design — because they are.
The M3 button family consists of five distinct types, each serving a different level of emphasis in the UI:
- Filled button — highest emphasis, used for the primary action on a screen
- Filled tonal button — medium-high emphasis, a softer alternative to the filled button
- Outlined button — medium emphasis, useful for secondary actions alongside a filled button
- Text button — lowest emphasis, typically used in dialogs or inline in content
- Elevated button — medium emphasis with a shadow, used when a button needs to stand out from a patterned or image background
Understanding the hierarchy matters. Using a filled button for every action defeats the purpose of the system. Theme widgets help here too — by naming them clearly and building each one once, you make the right choice obvious for every collaborator on the project.
M3 buttons as theme widgets in FlutterFlow
Creating theme widgets in FlutterFlow is straightforward. The end result gives you the full M3 button family available as named, reusable components in the widget picker — consistent, on-brand, and easy to drop into any screen.
To create them, navigate to Theme Settings → Theme Widgets in FlutterFlow. From here you can define any reusable UI element for your app. The workflow for buttons looks like this:
- Create a new theme widget and name it after its M3 type — FilledButton, OutlinedButton, and so on. Naming conventions matter; they'll appear in the widget picker exactly as you label them.
- Set the border radius to 20 to match M3's fully rounded shape token for buttons.
- Set the height to 48 rather than the M3 spec default of 40. Android accessibility guidelines recommend a minimum touch target of 48dp, and this is a sensible default to bake in from the start.
- Set elevation to 0 for all button types except the elevated button, which carries a subtle shadow by design.
- Apply consistent padding across all button types.
- Once the first button is configured, duplicate it and adjust the colour roles and elevation for each remaining type. The bulk of the work is done after the first one.
Colour roles in M3 buttons
One area where M3 represents a genuine improvement over M2 is its colour system. Rather than assigning raw hex values, M3 uses colour roles — semantic tokens like primary, on-primary, secondary-container, and on-secondary-container. Each button type maps to specific roles by default.
In FlutterFlow, you should wire your button theme widgets to these colour roles rather than hardcoded values. This means your entire button family automatically adapts when you change your seed colour or switch between light and dark themes — with no manual updates required. It's one of the more powerful aspects of building on M3 properly, and it's easy to skip if you're not thinking about it early.
Extending the pattern beyond buttons
Once your button family is in place, the same approach applies across the rest of your component library. Chips, cards, dialogs, navigation bars, FABs — each has M3 specifications for shape, elevation, and colour roles. Building them as theme widgets before you start laying out screens means you're making design decisions once, not repeatedly and inconsistently under deadline pressure.
A practical order to work through: buttons first, then input fields and text fields, then cards and surfaces, then navigation components. By the time you're building screens, most of the decisions are already made.
