1 of 141

Everything Material

All At Once

Package Author

Mike Rydstrom�@RydMike

Flutter Contributor

Taha Tesser

@TahaTesser

2 of 141

Everything Material Agenda

3 of 141

Everything Material

ColorScheme
Carousel
WidgetState
Button builders
Quality improvements
Adaptive theming
Animations

The ColorScheme has gone wild and we are going to talk about it …

4 of 141

Everything Material

ColorScheme
Carousel
WidgetState
Button builders
Quality improvements
Adaptive theming
Animations

The Carousel has landed in master!

5 of 141

Everything Material

ColorScheme
Carousel
WidgetState
Button builders
Quality improvements
Adaptive theming
Animations

MaterialState

WidgetState

6 of 141

Everything Material

ColorScheme
Carousel
WidgetState
Button builders
Quality improvements
Adaptive theming
Animations

Button builders can completely transform your Material buttons

7 of 141

Everything Material

ColorScheme
Carousel
WidgetState
Button builders
Quality improvements
Adaptive theming
Animations

Quality improvements in:

Button Icon Alignment
MenuItemButton
Chip leading & trailing constraints
SegmentedButton expanded insets
AppBar Shape Customization

8 of 141

Everything Material

ColorScheme
Carousel
WidgetState
Button builders
Quality improvements
Adaptive theming
Animations

We will dig into how to make platform adaptive themes and other advanced techniques

9 of 141

Everything Material

ColorScheme
Carousel
WidgetState
Button builders
Quality improvements
Adaptive theming
Animations

We will look at

Easings
Durations
AnimationStyle

10 of 141

“New” ColorScheme

11 of 141

The Evolution of Flutter’s Material ColorScheme

From Material 2

An easy 12 colors per

light and …

12 of 141

The Evolution of Flutter’s Material ColorScheme

From Material 2

An easy 12 colors per

light and dark theme

So 24 in total, not so hard to do

…theme mode, so 24 colors in total.

A curious thing with the dark mode theme in Flutter in the Material 2 era was that when you used a default dark theme in Flutter, you did not get a theme with the correct dark surfaces or even the Material-2 defaults, you had to jump through some extra hoops to get it, few knew it and did it right.

Still the main takeaway with the Material-2 ColorScheme was that there were not so many colors to grasp and it was quick and easy enough the define all the colors yourself and get a nice custom color scheme for your theme.

There was some confusing things in it, like what was the difference between surface and background color and why do they have the same value by default? There was also the limitation that primaryVariant and secondaryVariant did not have dedicated on colors, so if they needed another contrast than their none variant version, you were out of luck concerning getting a safe predefined color for it from the theme’s color scheme.

But all in all it was easy enough to deal with.

13 of 141

The Evolution of Flutter’s Material ColorScheme

To Material 3

With 30 colors per

light and …

Enter the first version of Material-3 in Flutter.

It removed all these shortcomings of contrasting on colors, making sure they exist for all colors.

The primaryVariant and secondaryVariant were replaced with “Container” named ones and we got a third color called Tertiary and its container.

In the Material-3 design system, the “Tertiary” color in a way got the task of taking on the past Material2 secondary role, in the sense that it is now the color with a different hue than primary, like secondary was in Material-2. Whereas secondary now typically is the same hue as primary, but with less chroma, it is a less colorful version of the primary color.

The Material-3 color scheme still kept both background and surface colors, and still having the same values by default. Why? They existed so designers optionally could give them different shades and use them for different types of backgrounds, like new surfaceVariant also did. Most default mappings were to surface.

This is pretty much the ColorScheme we had until version 3.19 of Flutter. We now have 30 colors to deal with for light and…

14 of 141

The Evolution of Flutter’s Material ColorScheme

To Material 3

With 30 colors per

light and dark theme

Making it 60 in total!

Eh, OK, but OUCH …

NOTE: There were 7 more colors in Flutter than those shown in above M3 guide at the time. These were outlineVariant, inversePrimary, inverseSurface, onInverseSurface, surfaceTint, scrim and shadow making it 30 per mode

15 of 141

The Evolution of Flutter’s Material ColorScheme

To the revised ColorScheme in

Flutter 3.22 and later

With 46 colors per

light and …

16 of 141

The Evolution of Flutter’s Material ColorScheme

To the revised ColorScheme in

Flutter 3.22 and later

With 46 colors per

light and dark scheme

Now it is 92 in total !

WHAT?

NOTE: The color surfaceTint is missing above. There are also 3 deprecated colors in the Flutter ColorScheme: background, onBackground and surfaceVariant

17 of 141

Revised ColorScheme

Why this change?

To bring Flutter up to Material Design specification changes introduced already in March 23, 2023

Why the specification update?

Address developer experience feedback about using elevation to create surfaces with tinted surfaces

18 of 141

Revised ColorScheme

Surface Colors

The update introduces new dedicated surface color roles that are no longer tied to Material elevation

We now have predefined color shades for different surface roles

New surface color roles

Surface container is the default role, others are used for creating hierarchy and nested containers in layouts on larger media

This was internally done using an alpha blend and a step function from the elevation to get the used alpha for the alpha blend.

This worked, but it was difficult to predict the outcome and use fine tuned custom designs with predefined desired color shades for different surface.

Now we instead get a large number of surface color roles that have predefined shades, and we can use generated precomputed values or customize them as desired.

In the guide there is a mapping example of how the surface levels maps to new container colors. The colors do not match exactly, it is more like a replacement guide. Also, surface levels are not equal to dp elevation level in Flutter’s Material component, there is another conversion for that.

But we don’t have know about the levels, all we need to know that lowest, is closest to white in light mode and it gets more “shady”, well primary tinted greyish as we move up. In dark mode lowest is closest o black and it gets more primary tinted grey as we move up.

19 of 141

Revised ColorScheme

Fixed Colors

Primary fixed, secondary fixed, and tertiary fixed plus their dim variants, are fill colors used against surfaces

These colors maintain the same tone, meaning they are the same color, in light and dark themes. This is different from regular container colors, which change in tone, or color, between theme mod

The fixed color role may be used instead of the equivalent container role in situations where such fixed behavior is desired

Another major new addition is the introduction of fixed main colors. When I call something main color I always mean primary, secondary and tertiary and all their related colors in a ColorScheme. So we got Primary fixed, secondary fixed, and tertiary fixed plus their dim variants, plus on colors for them.

Material 3 components do not use these by default (at least I did not find any such usage yet in Flutter), the colors are there so you can map them to built-in Material components/widgets via component themes or your custom components and containers, when so called for by your design needs.

DEMO that the colors are fixed by jumping back to light/dark scheme and cycle between them to show that everything else changes, but the fixed colors do not. Mention a caveat when they will NOT remain fixed and say that I will demo it later!

20 of 141

Revised ColorScheme

Scheme Variants

In Flutter 3.22.2 and later we have

DynamicSchemeVariant

21 of 141

Revised ColorScheme

Scheme Variants

In Flutter 3.22.2 and later we have

DynamicSchemeVariant

Tonal Spot

Material and Flutter default

Used source color

22 of 141

Revised ColorScheme

Scheme Variants

In Flutter 3.22.2 and later we have

DynamicSchemeVariant

Fidelity

Used source color

23 of 141

Revised ColorScheme

Scheme Variants

In Flutter 3.22.2 and later we have

DynamicSchemeVariant

Vibrant

Used source color

24 of 141

Revised ColorScheme

Scheme Variants

In Flutter 3.22.2 and later we have

DynamicSchemeVariant

Content

Used source color

25 of 141

Revised ColorScheme

Scheme Variants

In Flutter 3.22.2 and later we have

DynamicSchemeVariant

Neutral

Used source color

26 of 141

Revised ColorScheme

Scheme Variants

In Flutter 3.22.2 and later we have

DynamicSchemeVariant

Monochrome

Used source color

27 of 141

Revised ColorScheme

Scheme Variants

In Flutter 3.22.2 and later we have

DynamicSchemeVariant

Expressive

Used source color

28 of 141

Revised ColorScheme

Scheme Variants

In Flutter 3.22.2 and later we have

DynamicSchemeVariant

Rainbow

Used source color

29 of 141

Revised ColorScheme

Scheme Variants

In Flutter 3.22.2 and later we have

DynamicSchemeVariant

Fruit Salad

Used source color

30 of 141

Revised ColorScheme

Contrast Level

In coming next stable we will likely also get contrast level from -1 to 1, where -1 is the lowest, zero is normal, 1 is highest

Level 0.0 is standard contrast
Level 0.5 is medium contrast
Level 1.0 is high contrast

We will look at all the new ColorScheme features a bit closer in a demo shortly

31 of 141

Too many colors to

define manually

Use a tool?

Web Material Theme Builder�https://material-foundation.github.io/material-theme-builder/

Figma Material Theme Builder�https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder

32 of 141

Web Material

Theme Builder

https://material-foundation.github.io/material-theme-builder/

Select your main colors, add theme extension colors, add custom fonts, and export …

33 of 141

export…

And we get this, for the light theme and another set for the …

34 of 141

export…

And we get this, for the light theme and another set for the dark theme

For both light and dark, we also get the higher than normal contrast schemes, medium contrast and high contrast

As mentioned, the contrast level is a new feature coming in a future release of Flutter, potentially in next stable

�Contrast level exists already as a property in ColorScheme.fromSeed in the master channel

35 of 141

export…

We also get some nice utilities for the theme and our custom colors

Note:�The custom colors are not implemented as Flutter theme extensions, just a getter!

The theme also uses deprecated background color

For more info about Theme Builder check out a talk tomorrow (July 5, 2024) by Shree Bhagwat at 10:15 in the Async Area room

36 of 141

Manually?

The Material theme builders are nice, but if you change anything you will need to regenerate everything and import it again

They also demonstrate the futility of trying the define schemes manually

Too many colors and intricate relationships between them that must be defined correctly

How can we do it in Flutter?

37 of 141

From Seed

Using ColorScheme.fromSeed is the well known standard approach in Flutter for defining a custom Material ColorScheme using Flutter code

You can use a custom or brand color as the seed color to generate the ColorScheme

Let’s say we have indigo blue:

Where is my brand color?

38 of 141

From Seed

Using ColorScheme.fromSeed is the well known standard approach in Flutter for defining a custom Material ColorScheme using Flutter code

You can use a custom or brand color as the seed color to generate the ColorScheme

Let’s say we have indigo blue:

Pin the brand color to desired scheme color!

We can pin the seed color to desired color in our produced color scheme, basically this is just a built in copyWith override to use exact provided color values for specified colors.

Typically if we have a brand color, companies main brand color is often intended to be printed on white paper. So it is usually quit bright and has high contrast on white. This mean it typically also works well as override color for the primary color in our light scheme.

Often companies do not have defined brand color intended to presented on dark/black background, but if they do we can potentially use it as pinned primary in dark modet. However, the main brand color for light theme is very rarely suitable for be used as primary color in dark mode, as it does not offer enough contrast on dark background. It can however often be used on primaryContainer in dark mode, so we can get a bit of the fixed brand color into the ColorScheme there and used on some default component color mappings in dark mode too.

You should prefer seeding from the same seed color in light and dark scheme, I recommend using the light mode brand color. This way the generated color schemes get mapped from tonal palettes based on the same source colors, this will ensure that light and dark color scheme match each other. You don’t have to do this, but often it is a design goal. Feel free to go wild if you know what you are doing. :)

39 of 141

From Seed

ColorScheme.fromSeed produces a different result in Flutter 3.22 compared to earlier

Before

Flutter 3.22

40 of 141

From Seed

ColorScheme.fromSeed produces a different result in Flutter 3.22 compared to earlier

Primary colors are more muted
Light surfaces are more tinted
Dark surfaces are darker

After

Flutter 3.22

41 of 141

From Seed

ColorScheme.fromSeed produces a different result in Flutter 3.22 compared to earlier

Proposed solution, the new API in Flutter 3.22.2

DynamicSchemeVariant

“Fidelity”

Brighter? Yes!

Nice, but not the same

42 of 141

From Seeds?

We have TWO brand colors! With Theme Builder I can specify them and use our accent brand color and get it applied to e.g. tertiary colors

How can I do this with ColorScheme.fromSeed?

We have indigo blue and …

43 of 141

From Seeds?

We have TWO brand colors! With Theme Builder I can specify them and use our accent brand color and get it applied to e.g. tertiary colors

How can I do this with ColorScheme.fromSeed?

We have indigo blue and asparagus:

Not doable?

…and asparagus green? As a brand accent color that we want to use?

First, due to how color roles work in Material Design ColorScheme, if you have two brand colors, I recommend using the 2nd one as tertiary color in the ColorScheme, especially if it is of a different hue than the main brand color, which it often is.

What can we do? We only have one seed (source or key) color in Flutter, and this is also the case in the library DynamicScheme it uses from the package Material Color Utilities that entire Flutter framework depends on.

Well ok then, what if we override tertiary and terairyContainer with our brand accent color?

Yes we can do that, but all the other tertiary colors are then still based on seed generated results. We would need to override 14 more color values, doable, but a bit tedious.

44 of 141

From Seeds

Use a package, where we can use:�SeedColorScheme.fromSeeds

Slightly different API, but very close to original. It can use a separate seed key color for every color palette used by the ColorScheme

We have indigo blue and asparagus:

45 of 141

From Seeds

When using�SeedColorScheme.fromSeeds

You also get many additional features to modify and tune the ColorScheme generation, for example:

Black and white as on colors
Pure monochrome surface
Black and white surface

We have indigo blue and asparagus:

46 of 141

FlexSeedScheme

We need a package that gives us:�SeedColorScheme.fromSeeds

Available in package: flex_seed_scheme�https://pub.dev/packages/flex_seed_scheme

Web demo: https://rydmike.com/flexseedscheme/demo-v3/

47 of 141

Features

FlexSeedScheme

https://rydmike.com/flexseedscheme/demo-v3

Dynamic schemes MCU

48 of 141

Features

FlexSeedScheme

https://rydmike.com/flexseedscheme/demo-v3

Dynamic schemes MCU

Flex tones schemes FSS

49 of 141

Features

FlexSeedScheme

https://rydmike.com/flexseedscheme/demo-v3

Dynamic schemes MCU

Flex tones schemes FSS

Seed for each palette MCU & FSS

50 of 141

Features

FlexSeedScheme

https://rydmike.com/flexseedscheme/demo-v3

Dynamic schemes MCU

Flex tones schemes FSS

Seed for each palette MCU & FSS

Contrast level MCU

51 of 141

Features

FlexSeedScheme

https://rydmike.com/flexseedscheme/demo-v3

Dynamic schemes MCU

Flex tones schemes FSS

Seed for each palette MCU & FSS

Contrast level MCU

Test pinning of seed colors

FSS only:

Quick scheme modifiers

Customizable scheme generation

52 of 141

New Component Color Mappings

The new Material specification changed how all Material widgets use surface colors

Example�Navigation Bar

Instead of using surface impacted by elevation 3 and surfaceTint, it now uses surfaceContainer with fixed pre-computed color with a defined shade for the used surface role

Elevation is still 3, but surfaceTint is set to transparent so it has no effect

53 of 141

New Component Color Mappings

The new Material specification changed how all Material widgets use surface colors

Example�Navigation Bar

Instead of using surface impacted by elevation 3 and surfaceTint, it now uses surfaceContainer with fixed pre-computed color with a defined shade for the used surface role

Elevation is still 3, but surfaceTint is set to transparent so it has no effect

54 of 141

New Component Color Mappings

The new Material specification changed how all Material widgets use surface colors

The changes in the NavigationBar case are small and subtle, but in total this was an enormous change in Flutter 3.22, that impacted

Almost all Material design widgets
ColorScheme colors
Material theme defaults in Flutter

Files changed 181 (for part 2 only !!)

55 of 141

Component Defaults?

Two related questions I here about Material:

How are colors in ColorScheme used?
What default values do components use?

Answer 1:

Check the Material 3 guide!

It tells you what it should be

https://m3.material.io/components/navigation-bar/specs

56 of 141

Component Defaults?

Two related questions I here about Material:

How are colors in ColorScheme used?
What default values do components use?

Answer 2:

Check the Flutter component M3 defaults at the end of each component’s code file

It tells you what it actually is!

Typically the guide spec and Flutter code match

https://github.com/flutter/flutter/blob/stable/packages/flutter/lib/src/material/navigation_bar.dart

57 of 141

New Carousel Widget

58 of 141

59 of 141

60 of 141

61 of 141

New CarouselView Widget

https://main-api.flutter.dev/flutter/material/CarouselView-class.html

62 of 141

CarouselView

63 of 141

WidgetState

64 of 141

WidgetState

WidgetState replaces MaterialState

Kind of boring, but good to know

API moved from Material library to Widget Library. Rationale, allow Cupertino Widgets and custom libraries to use it the APIs without depending on Material

Flutter does not use new APIs internally yet, its code samples are still

Yes there is a Flutter fix

https://github.com/flutter/flutter/issues/138270

You are most likely to come across the new APIs when you maks themes or style buttons.

Other than WidgetState itself you will often use and come across:

WidgetStateColor

WidgetStateProperty

WidgetStatePropertyAll

65 of 141

Button builders

66 of 141

Button builders

67 of 141

Button builders

68 of 141

Button builders

69 of 141

Button builders

70 of 141

Button builders

https://api.flutter.dev/flutter/material/TextButton/styleFrom.html

71 of 141

Quality Improvements

72 of 141

Button Icon Alignment

https://api.flutter.dev/flutter/material/ButtonStyleButton/iconAlignment.html

73 of 141

Button Icon Alignment

https://api.flutter.dev/flutter/material/ButtonStyleButton/iconAlignment.html

74 of 141

Button Icon Alignment

https://api.flutter.dev/flutter/material/ButtonStyleButton/iconAlignment.html

75 of 141

Button Icon Alignment

https://api.flutter.dev/flutter/material/ButtonStyleButton/iconAlignment.html

76 of 141

Menu Item Button

77 of 141

Menu Item Button

78 of 141

Menu Item Button

79 of 141

Menu Item Button

80 of 141

Chip leading & trailing constraints

81 of 141

Chip leading & trailing constraints

82 of 141

Chip leading & trailing constraints

https://main-api.flutter.dev/flutter/material/Chip/avatarBoxConstraints.html

https://main-api.flutter.dev/flutter/material/Chip/deleteIconBoxConstraints.html

83 of 141

Chip leading & trailing constraints

https://main-api.flutter.dev/flutter/material/Chip/avatarBoxConstraints.html

https://main-api.flutter.dev/flutter/material/Chip/deleteIconBoxConstraints.html

84 of 141

SegmentedButton expanded insets

85 of 141

SegmentedButton expanded insets

86 of 141

SegmentedButton expanded insets

87 of 141

AppBar Shape Customization

88 of 141

AppBar Shape Customization

https://main-api.flutter.dev/flutter/material/AppBar/shape.html

89 of 141

AppBar Shape Customization

https://main-api.flutter.dev/flutter/material/AppBar/shape.html

90 of 141

Adaptive Theming

91 of 141

Platform Adaptive Theming

Material ThemeData can be platform aware

You can make an application where built-in and custom components look and behave differently depending on the platform your app is running on

We will take a look at an example of this and at the same time get a primer into advanced customization of Material widgets in Flutter using theming

92 of 141

A theme for a fictive Avocado Deli

Designer’s Color Tokens

Avocado

#334601

Avocado Ripe

#3F4925

Avocado Lush

#C4D39D

Avocado Prime

#FFFBD8

Avocado Meat

#FFF5AD

Avocado Tender

#E2EEBC

Avocado Core

#4C1C0A

Effect Light

#F2B9CC

Effect Dark

#3E0021

App colors that must be used in the design

93 of 141

Define ColorScheme Tokens

First step, define the same color tokens. We need to figure out how to get these into a light and dark ColorScheme

94 of 141

A theme for a fictive Avocado Deli

Designer’s Color Tokens

Received Light

#00257F

Received Dark

#C1CCFF

Preparing Light

#045E72

Preparing Dark

#DBF5FF

Delivery Light

#00513D

Delivery Dark

#BBFFE4

Delivered Light

#005305

Delivered Dark

#CFFFC1

Semantic order status colors

95 of 141

Define Semantic Color Tokens

We use some custom semantic colors for order status. We will use them via ThemeExtension and also harmonize the colors to our scheme’s primary color

96 of 141

Adaptive Theme Tokens

We also need some tokens to drive our custom adaptive theme response

Not many, first a bool for when we use it, plus a BorderRadius and OutlinedBorder Shape

We will use these in our component themes

97 of 141

Define ColorScheme

A ColorScheme with three key colors, pin token colors as appropriate in light and dark schemes. Use FlexTones.chroma as it follows the chroma of used key colors, we modify it to use monochrome surfaces on none Android platforms

98 of 141

ColorScheme Result

A ColorScheme with popping colors, we baked in our color tokens so that the scheme follows the Material color system

ColorScheme result on none Android platforms

99 of 141

ColorScheme Result

A ColorScheme with popping colors, we baked in our color tokens so that the scheme follows the Material color system

ColorScheme result on Android platform

100 of 141

ColorScheme Result

If we had not pinned our color design tokens, the result would have looked like this on the Android platform

101 of 141

Platform Adaptive Theming

We want a platform adaptive theme where components on Android are recognizable as being Material 3 design based, but on all other platforms we want a more platform agnostic design

Buttons a more iOS like radius, we use 10dp and also no ink splash on none Android platforms!

Android

Other platforms

102 of 141

Platform Adaptive Theming

We want a platform adaptive theme where components on Android are recognizable as being Material 3 design based, but on all other platforms we want a more platform agnostic design

ToggleButtons match Outlined and Filled buttons SegmentedButton matches FilledTonal

Android

Other platforms

103 of 141

Platform Adaptive Theming

We want a platform adaptive theme where components on Android are recognizable as being Material 3 design based, but on all other platforms we want a more platform agnostic design

Chips default rounded corners on Android and Stadium on other platforms. They need to use a design that makes them look different from buttons on respective platforms. We also want smaller Chips, the defaults are too bulky, almost button sized

Android

Other platforms

104 of 141

Platform Adaptive Theming

We want a platform adaptive theme where components on Android are recognizable as being Material 3 design based, but on all other platforms we want a more platform agnostic design

Switch default Material style on Android, themed to be iOS like on other platforms

Android

Other platforms

105 of 141

Other Advanced Theming

An AppBar with some “secret” sauce features�
An adaptive iOS look alike themed Material Switch�
A nicer InputDecorator for TextField and Dropdown�
Harmonize our semantic colors to our color scheme so theme changes will transition animate our colors�
Custom TextTheme for the app�
Custom semantic TextStyles for blog content, where their themed font size changes will transition animate

106 of 141

Adaptive Theme Demo

Demo app repository

https://github.com/rydmike/adaptive_theme_demo

107 of 141

Adaptive Theming and Other Tricks

Basic Setup

Only three ThemeSettings properties in a data class�A single function that returns our app’s ThemeData�No controversial state management package, just setState :)�

108 of 141

Adaptive Theming and Other Tricks

Define ThemeData

Define our ThemeData based on brightness and theme settings�Get our custom platform adaptive ColorScheme�Use customized platform adaptive visual density

109 of 141

Adaptive Theming and Other Tricks

Define ThemeData

Use Material-3, really don’t use Material-2 anymore!�Apply our platform adaptive ColorScheme and VisualDensity�Use a custom splash factory “InstantSplash” for none Android builds

Copy of built-in InkSplash.splashFactory with modified animation durations and splash velocity. There is a built-in NoSplash.splashFactory, it can also be used. It animates the tap highlight, this custom one is instant. Used as an example, you may prefer the NoSplash.splashFactory for a similar effect

By the way ThemeData uses adaptive splash by default too, it does this:

110 of 141

Adaptive Theming and Other Tricks

ThemeData Legacy Props

Prefer the Material-3 Typography, even if you still use M2.�Fix legacy colors in ThemeData, eventually these will be deprecated, but as long as they exist, set them to our ColorScheme colors

Coming ThemeData color deprecations https://github.com/flutter/flutter/issues/91772

111 of 141

Adaptive Theming and Other Tricks

AppBar

A “secret” sauce is a shape to get the scroll under effect to animate. Shadow is used for a faint underline separation. Background also has a hint of opacity and we use a custom font

When it comes to customizing TextStyles for Material components, don’t try to change the default a component is using the app’s general TextTheme.

Many components may use the same style as its default, and you may not want to change them all. Sure if you do, and you know which components it impacts, then you should do that.

Typically you just want to tweak the default text style for a given component. You can then use another existing style in the text theme, or like here, add a completely custom style.

The center title is force on purpose on iOS here. Flutter does this automatically too on iOS platform, but only when there is max one trailing widget in the AppBar, in this demo I wanted it also when there is two trailing widgets. Maybe not the spiffiest design, but in this demo it is used to also show the typical different AppBar title layout.

The opacity is used to show you can get an OKis effect with very low opacity, it is not like the much nicer blur opacity, if you want that you have to make a custom AppBar version, as it cannot be done via a theme only. Would be nice if it could. For something you do have style and compose widgets too. Theming cannot do everything, but it can get you close enough in a lot of cases.

112 of 141

Adaptive Theming and Other Tricks

Buttons

Platform adaptive shape on all Material buttons�Custom color mapping on Elevated button�Ink splashes only on Android

The buttons themes are very simple, just use the custom shape on none Android builds and keep defaults by passing null for Android to get the default Material 3 design. We do some custom color mapping on the elevated button to give it a more app theme like vibe. Honestly, the M3 ElevatedButton, new default is surfaceContainerLow it is about as exciting as its past surface based color with elevation tint, meaning kind of meh but luckily it is easy to give it some more flare.

With the buttons it is also easy to test and see the splash difference. On Android we still have its default spreading ink and sparkle on M3 effect, but on everything else it is just an instant color overlay that is there as long as we keep the button pressed. On desktop we have hover and focus colors as before. This new splash style, applies to everything that uses splashes. Well almost… there is one exception...

113 of 141

Adaptive Theming and Other Tricks

Toggle and Segmented Buttons

We can style Toggle and Segmented buttons differently for different use cases. Toggle Buttons theming it is a bit tricky. We want it to match the style of our Outlined and Filled buttons

114 of 141

Adaptive Theming and Other Tricks

Chip and Switch

We want Chips to be smaller and not the same shape as buttons

For the Switch we want iOS look alike on none Android platforms

Since Buttons have rounded corners in our none Android design, we make Chips Stadium shaped so they are well differentiated from buttons. Similar to how they looked in M2, but nicer with with M3 ColorScheme Mappings

And we make them more compact too, they are so big in default Material design now.

With Switch we have two tricks, we can Theme vanilla Switch and get a style close to iOS on all none Android platforms and Android default on Android.

We can also use Switch.adaptive constructor, since we enabled Cupertino using all colors with CupertinoThemeData(applyThemeToAll: true), the, CupertinoSwitch will get our custom theme colors and we will get the real iOS Switch on iOS and macOS if we use Switch.adaptive but e.g Linux and Windows, will get our themed adaptive version, which is an “almost” iOS like Switch, and on Android, we get Material 3 default Switch.

115 of 141

Adaptive Theming and Other Tricks

NavigationBar

Don’t be afraid to tweak the Material Navigation bar, you can for example make it less tall and use a more distinct selected option color than the default one

116 of 141

Adaptive Theming and Other Tricks

Android System Navigation Bar

And please make the Android system navigation look nice, like iOS. Make it edge-to-edge and transparent. Use the AnnotatedRegion to style it with a custom SystemUiOverlayStyle

117 of 141

Adaptive Theming and Other Tricks

Input Decoration

Making a nice custom InputDecoration theme is tedious and complex. You also need to use it in some component themes that can accept an input decoration, like eg DropdownMenu

118 of 141

Adaptive Theming and Other Tricks

Dialogs

Not much done to Dialogs, some minor custom color mapping and bringing back shadows to them. The surface colors on Android have minor primary chroma in them, other platforms are monochrome

119 of 141

Adaptive Theming and Other Tricks

Text Theme

With GoogleFonts define styles for each TextStyle in a TextTheme using google fonts text styles or use GoogleFonts.nnnTextTheme

120 of 141

Adaptive Theming and Other Tricks

Text Theme

Since GoogleFonts TextTheme has a color issue, prefer using individual GoogleFonts styles or work around the issue��Note: Typically you have same styles on primaryTextTheme, different styles used to show the issue

https://github.com/material-foundation/flutter-packages/issues/401

121 of 141

Adaptive Theming and Other Tricks

Theme Extension

As the last piece we will use ThemeExtension as a means to add custom theme properties. We define one theme extension for all our semantic colors and our two “semantic” content text styles

122 of 141

Adaptive Theming and Other Tricks

Theme Extension

Defining a ThemeExtension has some boilerplate, we need to define our properties, extend ThemeExtension having a type of the class we define, plus we must override its copyWith and lerp methods

https://www.youtube.com/watch?v=8-szcYzFVao

123 of 141

Adaptive Theming and Other Tricks

Harmonize Colors

In schemes, you can automatically adjust the hue of static colors so they look better alongside the scheme’s primary color. This especially useful if you have many themes or if it is dynamic

Material 3 guide https://m3.material.io/styles/color/advanced/adjust-existing-colors#1cc12e43-237b-45b9-8fe0-9a3549c1f61e

124 of 141

Adaptive Theming and Other Tricks

Theme Extension using Order Status Widget

Just the�token value��Theme extension and harmonized

To then use our custom order status colors in widget, we can do something like this. Where we get the color from an OrderStatus enum.

Notice the fallback! If you forget to add the theme extension to your ThemeData, we would get a null error. When you make custom widgets using theme extension, consider giving them default fallback values that they use if the theme extension has not been added at all to ThemeData. This is especially critical if you make packaged widgets that come with their own theme as a theme extension. They should work nicely also with default values without users adding the extension, which they only need to do when they want to customize it.

Back to the colors, in this example. why did we do all this?

If our theme is dynamic, or we have many fixed themes user can select from, we can ensure that our semantic or custom colors outside the ColorScheme, will always fit with the ambiance of the used ColorScheme.

Plus when we change theme, the custom semantic colors will lerp animate to their new color.

This happens also if you change to a new theme within the same theme mode, and of course between light and dark switches. If we look at the example and light/dark toggle, the Token based switch color instant half way through the rest of the theme transition, but the theme extension based colors lerp animate with the rest of the theme transition.

125 of 141

Adaptive Theming and Other Tricks

Theme Extension TextStyles

No need to worry about clashes with TextTheme styles
Get them via Theme.of(context).extension
They animate their theme TextStyle changes ⇒ Nice!

126 of 141

Adaptive Theme Result

127 of 141

That was a lot, and we learned that

Theming Rocks!

128 of 141

Animations

129 of 141

130 of 141

131 of 141

Material Easings

132 of 141

Material Easings

133 of 141

Material Easings

Easings.emphasizedDecelerate

Easings.standardDecelerate

134 of 141

135 of 141

Material Durations

136 of 141

Material Durations

137 of 141

Material Durations

138 of 141

AnimationStyle

139 of 141

AnimationStyle

140 of 141

What We Learned

The updated ColorScheme is complex, but nice with static and more surface shades. Scheme generation is flexible, with the right package

The new Carousel widget is lovely

Migrate to WidgetState

Use button builders to take your Material Buttons to the next level

Components continuously improve, also in subtle ways, as we saw with Button icons alignment, Chip constraints and AppBar shape customization.

Material theming in Flutter is deep and full of powerful capabilities

Animations are not only fun to play with, they lift the user experience to new levels

141 of 141

Thank you!

Questions?

Everything Material

All At Once

Package Author

Mike Rydstrom�@RydMike

Flutter Contributor

Taha Tesser

@TahaTesser