FlexAdaptive class

The FlexAdaptive class is used to define on what platforms FlexColorScheme generated ThemeData platform adaptive theming features are used.

FlexColorScheme provides platform adaptive theming features, where you can opt in and out of theming features and use different settings, based on device platform and platform specific web usage of a web build of your FlexColorScheme themed application.

The purpose of this feature is to enable using Material design based themes, that are adjusted differently based on the used platform. A typical use case is removing Material-3 design features that may be too opinionated on e.g. iOS and desktop platforms, but you may want to keep them on Android.

Each platform adaptive theming feature can be configure what platform it applies to. You can even define it so that you get a different theme on the device native build and when using a web build of the same app on same device. The swapping between the default standard theme and the platform adaptive version, can be done per platform and web usage per platform.

The following adaptive theme settings are available in FlexColorScheme:

• FlexSubThemesData.adaptiveRemoveElevationTint to adaptively remove elevation tint when Material-3 mode is used.
• FlexSubThemesData.adaptiveElevationShadowsBack to adaptively bring elevation shadows back where they were removed in Material-3, when Material-3 mode is used.
• FlexSubThemesData.adaptiveAppBarScrollUnderOff to adaptively remove the AppBar scroll under elevation tint when Material-3 mode is used.
• FlexSubThemesData.adaptiveRadius to adaptively use global defaultRadiusAdaptive instead of defaultRadius in both Material-2 and Material-3 mode.
• FlexSubThemesData.adaptiveDialogRadius to platform adaptively use dialogRadiusAdaptive instead of dialogRadius in both Material-2 and Material-3 mode as border radius on on dialogs.
• FlexSubThemesData.adaptiveSplash to platform adaptively use splashTypeAdaptive instead of splashType in both Material-2 and Material-3 mode as Ink effect on Material widgets.

More platform adaptive theming features may be added in future versions, depending on feedback and requests. One planned future platform adaptive feature is to introduce the Squircle or super-ellipses as the curvature of the border radius. It would then be possible to use it adaptively on desired platforms. When this adaptive feature is enabled all Material components that use ShapeBorder will use Squircle curvature instead of circular borer radius, on selected platforms. The Squircle is the border curvature shape used on Apple devices. Adding this feature is a bit on hold since there is currently no consensus or built-in support in Flutter to draw an iOS correct Squircle. See issue: https://github.com/flutter/flutter/issues/91523

• FUTURE PLAN: FlexSubThemesData.adaptiveSquircle use Squircle as ShapeBorder shape instead of Circular, when added, will be available in both Material-2 and Material-3 mode.

Another planned feature is FlexSubThemesData.adaptiveAppBarStyle, that can enable you to e.g. use colored AppBar in traditional M2 style, plain white e.g. on iOS. This could be useful for designs that on Android prefer the classic M2 colored AppBar in light mode, but want to use a white AppBar on iOS to match the typical design style on it. Since M3 also brings surface colored AppBar to Android, this adaptive feature may not be in such high demand anymore, but if a feature request for it appears, it may be added.

By default all adaptive features use the FlexAdaptive.off setting and the adaptive style is not used on any platform.

There are many premade adaptive configurations available. One interesting option is for example the FlexAdaptive.iOSAndDesktop configuration. It makes the used adaptive behavior apply to all desktop platforms and their web usage, as well as to iOS devices and their web usage. The purpose of this config is that you only want the opinionated Material 3 designs on Android and Fuchsia devices and when the app is used on web on these devices, this for a platform correct progressive web app design for these devices. But for other usage you want the optional adaptive feature.

The following pre-made FlexAdaptive configuration constructors are available:

• FlexAdaptive.off
• FlexAdaptive.all
• FlexAdaptive.apple
• FlexAdaptive.appleWeb
• FlexAdaptive.desktop
• FlexAdaptive.iOSAndDesktop
• FlexAdaptive.excludeAndroidFuchsia
• FlexAdaptive.excludeWebAndroidFuchsia

You can easily make your own custom configuration, if the above ones do not fit your needs.

Platform aware adaptive theming in FlexColorScheme is not a replacement for using actual platform aware and adaptive widgets, either built-in ones in Flutter, or custom/package ones.

You may want to combine the platform adaptive theming features with selected platform adaptive widgets. The platform adaptive theming can help you remove certain features of Material 3 default theming that may look out of place if you use MaterialApp with ThemeData.useMaterial3 enabled to build a cross platform apps.

You may often want or need to use some Material Design widgets in your cross platform app. Using the platform aware theming features can make them look more platform agnostic, instead of using their Material 3 defaults. However, on Android you may prefer them to still use their M3 design. The adaptive theming features in FlexColorScheme are intended to help you do both with one theme, to achieve such a design goals.