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:

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:

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.

Mixed-in types
Annotations

Constructors

FlexAdaptive({required bool android, required bool androidWeb, required bool fuchsia, required bool fuchsiaWeb, required bool iOS, required bool iOSWeb, required bool linux, required bool linuxWeb, required bool macOS, required bool macOSWeb, required bool windows, required bool windowsWeb, bool? overrideIsWeb})
Default constructor for making a platform adaptive feature apply only on selected platforms.
const
FlexAdaptive.all({bool android = true, bool androidWeb = true, bool fuchsia = true, bool fuchsiaWeb = true, bool iOS = true, bool iOSWeb = true, bool linux = true, bool linuxWeb = true, bool macOS = true, bool macOSWeb = true, bool windows = true, bool windowsWeb = true, bool? overrideIsWeb})
The adaptive feature is used on all platforms.
const
FlexAdaptive.apple({bool android = false, bool androidWeb = false, bool fuchsia = false, bool fuchsiaWeb = false, bool iOS = true, bool iOSWeb = false, bool linux = false, bool linuxWeb = false, bool macOS = true, bool macOSWeb = false, bool windows = false, bool windowsWeb = false, bool? overrideIsWeb})
Use the adaptive feature on Apple operating system iOS and macOS, but not when using the app on web browsers builds on iOS and macOS.
const
FlexAdaptive.appleWeb({bool android = false, bool androidWeb = false, bool fuchsia = false, bool fuchsiaWeb = false, bool iOS = true, bool iOSWeb = true, bool linux = false, bool linuxWeb = false, bool macOS = true, bool macOSWeb = true, bool windows = false, bool windowsWeb = false, bool? overrideIsWeb})
Use the adaptive feature on Apple operating system iOS and macOS, and when using the app on web browsers builds on iOS and macOS.
const
FlexAdaptive.desktop({bool android = false, bool androidWeb = false, bool fuchsia = false, bool fuchsiaWeb = false, bool iOS = false, bool iOSWeb = false, bool linux = true, bool linuxWeb = true, bool macOS = true, bool macOSWeb = true, bool windows = true, bool windowsWeb = true, bool? overrideIsWeb})
Use the adaptive feature on desktop operating systems Windows, macOS and linux and also when using the app in their desktop web browsers.
const
FlexAdaptive.excludeAndroidFuchsia({bool android = false, bool androidWeb = true, bool fuchsia = false, bool fuchsiaWeb = true, bool iOS = true, bool iOSWeb = true, bool linux = true, bool linuxWeb = true, bool macOS = true, bool macOSWeb = true, bool windows = true, bool windowsWeb = true, bool? overrideIsWeb})
Use adaptive feature on all platforms on web and on all devices, except Android and Fuchsia devices.
const
FlexAdaptive.excludeWebAndroidFuchsia({bool android = false, bool androidWeb = false, bool fuchsia = false, bool fuchsiaWeb = false, bool iOS = true, bool iOSWeb = false, bool linux = true, bool linuxWeb = false, bool macOS = true, bool macOSWeb = false, bool windows = true, bool windowsWeb = false, bool? overrideIsWeb})
Don't use adaptive feature on any web platform, also exclude Android and Fuchsia devices from using the adaptive features.
const
FlexAdaptive.iOSAndDesktop({bool android = false, bool androidWeb = false, bool fuchsia = false, bool fuchsiaWeb = false, bool iOS = true, bool iOSWeb = true, bool linux = true, bool linuxWeb = true, bool macOS = true, bool macOSWeb = true, bool windows = true, bool windowsWeb = true, bool? overrideIsWeb})
Use adaptive feature on iOS and all desktop operating systems (Windows, macOS and linux), also when using the app in their web browsers.
const
FlexAdaptive.off({bool android = false, bool androidWeb = false, bool fuchsia = false, bool fuchsiaWeb = false, bool iOS = false, bool iOSWeb = false, bool linux = false, bool linuxWeb = false, bool macOS = false, bool macOSWeb = false, bool windows = false, bool windowsWeb = false, bool? overrideIsWeb})
The adaptive feature is not used.
const

Properties

android → bool
Set to true if adaptive feature should be used on Android.
final
androidWeb → bool
Set to true if adaptive feature should be used on web in Android.
final
fuchsia → bool
Set to true if adaptive feature should be used on Fuchsia.
final
fuchsiaWeb → bool
Set to true if adaptive feature should be used on web in Fuchsia.
final
hashCode → int
Override for hashcode, dart.ui Jenkins based.
no setteroverride
iOS → bool
Set to true if adaptive feature should be used on iOS.
final
iOSWeb → bool
Set to true if adaptive feature should be used on web in iOS.
final
linux → bool
Set to true if adaptive feature should be used on linux.
final
linuxWeb → bool
Set to true if adaptive feature should be used on web in linux.
final
macOS → bool
Set to true if adaptive feature should be used on web in macOS.
final
macOSWeb → bool
Set to true if adaptive feature should be used on web in macOS.
final
overrideIsWeb → bool?
This property should only be used if you wish to override the actual value of kIsWeb.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
windows → bool
Set to true if adaptive feature should be used on Windows.
final
windowsWeb → bool
Set to true if adaptive feature should be used on web in Windows.
final

Methods

adapt([TargetPlatform? platformOverride, bool? isWebOverride]) → bool
Using the current FlexAdaptive configuration, should the theme feature use this adaptive configuration?
copyWith({bool? android, bool? androidWeb, bool? fuchsia, bool? fuchsiaWeb, bool? iOS, bool? iOSWeb, bool? linux, bool? linuxWeb, bool? macOS, bool? macOSWeb, bool? windows, bool? windowsWeb, bool? overrideIsWeb}) → FlexAdaptive
Copy the object with one or more provided properties changed.
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Flutter debug properties override, includes toString.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringShort() → String
A brief description of this object, usually just the runtimeType and the hashCode.
inherited

Operators

operator ==(Object other) → bool
Override the equality operator.
override