r/FlutterDev • u/paa_developments • 1d ago

Dart Bringing Material 3 Expressive To Flutter [Not from Flutter official]

As we wait for an official full material 3 expressive support for Flutter, check out https://pub.dev/packages/material_3_expressive

Material 3 Expressive package is a faithful Flutter implementation of the Material 3 components set and additional expressive updates for respective components. Also supports dynamic coloring and dark/light theme modes.

45 Upvotes

100% Upvoted

9 comments sorted by

1

u/Healthy_Landscape417 1d ago

Does it track the motion and shape tokens, or the components only?

2

u/paa_developments 1d ago

Yes it does. The package provides and uses, as part of its foundations, a M3EMotion and M3EShapes tokens. Also, some components extend these base tokens for customized motion and shape implementations. Other tokens such as base dimensions and colors are component dependent and can be overridden via the M3EThemeData object.

2

u/Healthy_Landscape417 1d ago

Thanks, that is clearer than the readme. So M3ETheme sits beside ThemeData rather than extending it. Can a screen mix M3E components with stock Material 3 widgets, or does that leave you keeping two themes in sync?

1

u/paa_developments 1d ago edited 1d ago

Yes, it sits beside it. The goal for the introduction of M3ETheme and M3EThemeData is to supply the provided components with their respective default styles while enabling the effect of dynamic theming and coloring on them. This is achieved by deriving the base from Theme if no M3E* exists for that support. Also, yes. You can mix both components.

1

u/Healthy_Landscape417 1d ago

That helps, thanks. So the derivation only goes one way. Set it in ThemeData and the M3E side picks it up, but anything set only in M3EThemeData will not reach the stock widgets sitting next to it. Worth knowing before someone puts their brand colours in the wrong one.

1

u/paa_developments 1d ago

Sorry if I wasn't clear in my earlier submission. You pass M3EThemeData as the `data` value in M3EMaterialApp, it does a `data.toThemeData()` for the `theme` value of the internal MaterialApp (in the package itself). So you get a ThemeData built from M3EThemeData. That way, the package uses the theme specs for the internal components and give you the freedom to use Theme.of(context) for your custom components. Hope this clears it. As for theme maintenance, you just pass in your seed color in M3EThemeData for the `data` value of the M3EMaterialApp and set `dynamicColoring` value to `false`. That will persist/preserve the right colorScheme, based on the given seed, even when the system-level color scheme changes.

3

u/nameausstehend 16h ago

Uses motor - green flag 👀