Version 7.0.5

7.0.5

Apr 29, 2023

• Fix: #143 Glitches in highlighting effect on mouse hover over FlexThemeModeSwitch and FlexThemeModeOptionButton.

Version 7.1.0-dev.1

7.1.0-dev.1

Apr 24, 2023

This beta-1 of FlexColorScheme v7.1.0. It is a dev release using Flutter 3.10 beta channel. It requires Flutter version 3.10.0-1.3.pre or later. This beta version is a first preparation version of FlexColorScheme for the next stable Flutter release after version 3.7.x.

NEW

• Added datePickerTheme to FlexSubThemes.
• Added properties datePickerDialogRadius and datePickerHeaderBackgroundSchemeColor to FlexSubThemesData.

THEMES PLAYGROUND

• NEW

  • Added selection of themed header color scheme color for the DatePickerDialog on the Dialogs panel.
  • Added showing SearchBar with SearchView to the AppBar panel.
  • Added showing SearchBar with SearchView to the Widget Showcase.

• UPDATE

  • Reviewed and updated status of all known theming issues in info expands.

• SKIA

  • The SKIA canvaskit renderer is again being used to build all the web examples, including the Themes Playground.
  • The beta-1 version of Themes Playground 7.1 for FCS 7.1 can be tested here.

Version 7.0.4

7.0.4

Apr 22, 2023

• Package
  • No changes.
• Themes Playground
  • FIX: AppBar setting for using platform adaptive scroll under elevation tint removal was not working correctly. UI bug in Playground only, no package impact.

Version 7.0.3

7.0.3

Apr 19, 2023

• Fix #136 default background color regression on FlexThemeModeSwitch and FlexThemeModeOptionButton.

Version 7.0.2

7.0.2

Apr 16, 2023

• Chore: Changed to using flex_seed_scheme: ^1.2.4 that depends on material_color_utilities with version constraint set to >=0.2.0 <0.4.0 from ^0.2.0.
  • This change enables the package to be used on current Flutter stable 3.7 versions, as well as the latest 3.10.x versions on channels beta and master. It will also work with the next stable Flutter release after 3.7.

Version 7.0.1

7.0.1

Apr 6, 2023

• Package
  • No changes.
• Themes Playground
  • Less chatty UI
  • Revised media size breakpoints.
  • Vertical color selector mode.
  • More compact UI options for smaller laptop displays and tablets.

Version 7.0.0

7.0.0

Apr 2, 2023

This is a major update to the FlexColorScheme package and a substantial leap for the companion app Themes Playground. For a detailed list of all changes, please refer to the incremental log from its development release linked below.

• Changes from 6.1.2 to 7.0.0-dev.1

• Changes from 7.0.0-dev.1 to 7.0.0-dev.2

• Changes from 7.0.0-dev.2 to 7.0.0-dev.3 (final beta)

• Changes from 7.0.0-dev.3 to 7.0.0

  • Package: Only tests and documentation additions and updates.
  • Playground: Label and layout corrections.

The Themes Playground app built for this release is unfortunately not a SKIA renderer build, it is using the HTML renderer. This makes it less performant than the app would otherwise be. Additionally, scaled content, like the Themes Simulator panel in the Playground, is also fuzzier than it would be with the SKIA renderer. Due to an issue in Flutter stable 3.7.0 to at least 3.7.9, builds made with the SKIA renderer performs very poorly and crash quickly. For more information, see Flutter issue #122189. A new build using the same package version will be made later and released when a fix for the SKIA issues are available on the Flutter stable channel.

Version 7.0.0-dev.3

7.0.0-dev.3

Mar 18, 2023

This is the final beta v7 release before stable v7. There will be no new features or API changes in the FlexColorScheme package from this version to stable version 7.0.0. The only changes to stable will be potential bug fixes, typo corrections, API doc comment improvements and adding more tests.

The companion app Themes Playground, may get label improvements plus spelling and grammar corrections. Layouts in it may also be modified and improved as needed. It will not get any new features, but it may of course receive bug fixes.

The Themes Playground app built for this beta release is unfortunately not a SKIA renderer build, it is using the HTML renderer. This makes it less performant than the app would otherwise be. Additionally, scaled content, like the Themes Simulator panel in the Playground, is also fuzzier than it would be with the SKIA renderer. Due to an issue in Flutter stable (3.7.7), builds made with the SKIA renderer performs very poorly and crashes quite quickly. For more information see Flutter issue #122189. Hopefully, before the stable v7.0.0 release, a fix will be available. If not, a new build using the same package version will be made later and released when a fix is available.

FIX

• Fixed bug in legacy theme secondary and tertiary color swapping when using seed generated ColorScheme. In dark mode, combining legacy swapping and seed generation did not swap secondary and tertiary colors for schemes where it should do so. This is now fixed. If seed generation was not used, the swapping worked correctly in dark mode. In light mode it worked correctly also when seed generated schemes were used. The swapLegacyOnMaterial3 feature was introduced in version 6.1.0, it has had this bug for this case since it was introduced.

• Fixed bug where FlexSubThemes.drawerTheme was using BorderRadiusDirectional.horizontal with end radius instead of start radius as its endShape. This bug was introduced by version 7.0.0-dev.1 and has not been in any stable version.

• The FlexThemeModeOptionButton now correctly displays its hoverColor, previously it was obscured by the colored boxes inside it.

• The systemNavigationBarDividerColor issue #100027 in Flutter that in FCS v5 forced removing support for divider on the system navigation bar in Android, that was available via FlexColorScheme.themedSystemNavigationBar has been fixed. The issue could no longer be observed on Android versions 8 to 13 on Flutter 3.7.7 stable. The divider has been enabled again, and its test setting is also available in the Themes Playground app again. The extra SystemUiOverlayStyle call used as a work-around, for the same issue to fix an issue with Android 11, has also been removed, since the workaround was no longer needed.

• Fixed a bug where when passing in a custom textTheme or primaryTextTheme, instead of defining text theme via fontFamily, that FCS tinted text feature, via subThemesData.blendTextTheme, was not being correctly applied to the custom text themes. This is now fixed. If subThemesData.blendTextTheme is not being used, then the used Typography, either via subThemesData.useTextTheme, or by using a custom FlexColorScheme.typography override, always gets correct brightness for both textTheme and primaryTextTheme, regardless of brightness on passed in text themes. They also get the used Typography appropriate opacities on their text styles. In practice, this means that M2 style 2018 typography has opacity on some text styles, while M3 style 2021 typography, is fully opaque for all text styles.

NEW

• Add: drawerIndicatorOpacity to FlexSubThemesData.
  It controls the indicatorOpacity property in the FlexSubThemes.navigationDrawerTheme used to customize the opacity of used color on the NavigationDrawer indicator.

• Add: segmentedButtonUnselectedForegroundSchemeColor to FlexSubThemesData.
  It controls the unselectedForegroundSchemeColor property in the new FlexSubThemes.segmentedButtonTheme used to customize the SegmentedButton.

• Add: usedColors value 7.
  In FlexColorScheme and FlexThemeData light/dark constructors, the usedColors now accepts value 7. When used, the primary, secondary and tertiary colors in the used input scheme, are used as defined, but primaryContainer, secondaryContainer and tertiaryContainer are computed. This is FlexColorScheme's own more Material2 version of seed generation of the container colors by using their main colors as input colors.

• Add: bottomAppBarTheme, menuBarTheme and menuButtonTheme to FlexSubThemes.

• Add: inputDecoratorPrefixIconSchemeColor, drawerWidth, drawerIndicatorWidth, drawerIndicatorRadius, drawerIndicatorSchemeColor, navigationBarIndicatorRadius, navigationRailIndicatorRadius, menuBarRadius, menuBarElevation, menuBarShadowColor, snackBarActionSchemeColor and bottomAppBarSchemeColor to FlexSubThemesData.

• Add: menuRadius, menuElevation, menuOpacity, menuSchemeColor and dropdownMenuTextStyle to FlexSubThemesData.

• Add: drawerSelectedItemSchemeColor, drawerUnselectedItemSchemeColor, tabBarIndicatorSize, and tabBarDividerColor to FlexSubThemesData.

• Add: Static helper function onSchemeColor to FlexSubThemes.

• Add: To FlexThemeModeOptionButton added properties semanticLabel, focusColor and setFocusOnTap. If setFocusOnTap is set to true, the button will request focus when it is tapped. Display of previously not shown hover and focus effects where fixed, they now correctly use hoverColor and the new focusColor.

• Add: Property snackBarRadius to FlexSubThemesData, it controls the border radius via FlexSubThemes.snackBarTheme by using its radius property.

  • NOTE: If this property is set, both SnackBars with behavior fixed and floating will get the assigned radius. See Flutter issue: flutter/flutter#108539

• Add: Properties tabBarUnselectedItemSchemeColor, tabBarUnselectedItemOpacity, tabBarIndicatorWeight and tabBarIndicatorTopRadius to FlexSubThemesData.

• Add: New configuration class FlexAdaptive used to configure on which platforms adaptive theming features are used. Including 100% unit test coverage for the new class.

• Add: Four new FlexSubThemesData properties that uses the FlexAdaptive configuration class, to configure the features adaptiveRemoveElevationTint, adaptiveElevationShadowsBack, adaptiveAppBarScrollUnderOff and adaptiveRadius. The adaptiveRadius controls if the defaultRadiusAdaptive is used as value for effective global border radius instead of defaultRadius.

• Add: Seven new FlexSubThemesData properties menuBarBackgroundSchemeColor, menuPadding, menuItemBackgroundSchemeColor, menuItemForegroundSchemeColor, menuIndicatorBackgroundSchemeColor, menuIndicatorForegroundSchemeColor and menuIndicatorRadius.

• Add: Boolean property useInputDecoratorThemeInDialogs to FlexSubThemesData. Used to control if the application's themed input decoration is used or not, on time picker dialog theme text input fields. If not used, the time picker dialog uses null as input to its input decorator, in order to get the Flutter time picker default style. This toggle will also be used on date picker when/if it gets supported.

CHANGE

• Style breaking: FlexSubThemes.blendTextTheme defaults to false.
  In FCS before version 7, the default for blendTextTheme in FlexSubThemes was true, and blended text themes were used by default. Going forward if you want it, and also if you had not defined earlier and do not want to break your apps past style, set blendTextTheme to true.

• Style breaking: Card elevation default 1 dp.
  The Card opinionated sub-theme now defaults to null elevation, resulting in same default of 1 dp elevation as Flutter SDK in both M2 and M3 mode. Previously, FCS defaulted to elevation 0 dp on Cards when opting in on sub-themes.

• Style breaking: ColorScheme.outline and ColorScheme.outlineVariant.
  The FCS built-in computed none seeded values for ColorScheme.outline and ColorScheme.outlineVariant were modified. The new values are more in line with what you get with the M3 default seed algorithm, but plain grey-scale variants of them without any primary color blend. Technically light mode color for outline was changed from 30% lighten of light mode onBackground color to 45%, and outlineVariant from 60% lighten of onBackground to 75%. Likewise for the dark mode, but with darkening of the onBackground with the same percentage changes. The new values match the M3 design intent better.

• Style breaking: lightSurfaceVariant and darkSurfaceVariant.
  FCS v7 introduces FlexColor.lightSurfaceVariant and FlexColor.darkSurfaceVariant colors that are used when making none-seeded ColorSchemes. The colors are plain not tinted light and greys, matching the grey level of the tinted versions you get with seed-generated M3 colors. The colors are used as defaults for light and dark surfaceVariant color in none-seeded versions of generated FlexColorScheme color schemes. In previous versions surfaceVariant was just white and black in light and dark theme mode. To be able to better match the M3 color system, without using seed generation, this surface color should not be just white or black. The new surfaceVariant corrects this past design to improve compatibility with the M3 color system when not using seed generated color schemes.

• Style breaking: NavigationBar
  Changed the default NavigationBar h...

Version 7.0.0-dev.2

7.0.0-dev.2

Jan 25, 2023

CHANGE

• Updated to require minimum Flutter stable 3.7.0, compared to 7.0.0-dev.1 that required beta 3.7.0-1.4.pre.
• Updated to stable release of FlexSeedScheme ^1.2.0.

FIX

• Fix new scheme redM3 faulty dark mode colors.

THEMES PLAYGROUND

• CHANGE: Explanation for SegmentedButton.
• CHANGE: Intro text, to say that M3 in Flutter SDK is now ready for production.
• FIX: Wrap for PopupMenuButton.
• ADD: ThemeShowcase now includes Badge, so it gets featured as well.

TODO BEFORE FCS STABLE 7.0 RELEASE

• MUST DO: Review and do actionable TODOs in the code.

• MUST DO: Review and fix test coverage. Test new colors too.

• MUST DO: Review and test all tutorial examples.

• MUST DO: Add important changes to docs.flexcolorscheme.com:

  • Changelog.
  • ListTile transparent added to core defaults, may not be needed. Review before release.
  • Update known Flutter M3 and theming impacting issues. Remove fixed ones, add new known ones. (Slider update issue, not yet reported.)
  • Info section (plus article later) about what is still missing in Flutter 3.7 from M3.

• After release, more updates to FlexColorScheme docs:

  • New color scheme images
  • Review and update older screenshots and GIFs.
  • Use image zoom feature in docs.page more on current images.
  • Use new highlight banners feature, in the docs.page tool when appropriate.

• MAYBE: Make tinted disabled controls apply consistently to all controls when applied.

• MAYBE: Make tinted interaction effect apply consistently to all controls. New M3 widgets need to define it in their own sub-themes to get them, they don't use the hover, focus, highlight color from ThemeData for their defaults.

Postponed TODOs, that were planned for FCS stable 7.0, but moved forward to 7.1 or later.

• Add more sub-theme component color presentations to the Playground's Component Themes panel.
• Add some theming options for the new NavigationDrawer theme.
• Add some theming options for the new MenuBar theme.
• Add more "Set to M3 design" buttons like on Text Field panel, e.g. to Navigation Bar and Navigation Rail panels.
• To TabBar theming, add unselected color, not selected dim/undim and custom bottom borderline color.

Version 7.0.0-dev.1

7.0.0-dev.1

Work in progress!

Jan 23, 2023

This major release does not contain any breaking API changes. However, the major version is bumped because some past styles and defaults, when opting in on Material 3, have been slightly tuned to better align with new Material 3 widgets and design, included in the Flutter 3.8/4.0 (?) release. The new features are also significant.

NEW

• Added 12 new Material 3 color schemes: redM3,pinkM3, purpleM3, indigoM3, blueM3, cyanM3, tealM3, greenM3, limeM3, yellowM3, orangeM3 and deepOrangeM3 for a total of 52 built-in light and dark theme pairs. These schemes work well in Material 3 with or without seed generation. But using FCS advanced and flexible key color-based seed generation is recommended when using Material 3. You can always lock e.g. primary and tertiary color to custom brand color values you used as keys.

• Added support for new ColorScheme colors scrim and outlineVariant.

• Added support for fontFamilyFallback and package so that a copyWith on FlexColorScheme generated ThemeData is not needed to use them.

• Added support for Material 3 buttons FilledButton and FilledButton.tonal.

  • Supported via FlexSubThemes.filledButtonTheme that is controlled via FlexSubThemesData properties filledButtonRadius, filledButtonSchemeColor and filledButtonTextStyle.
  • When setting up theming for FilledButton it was noticed that variant FilledButton.tonal cannot be themed separately, see issue: flutter/flutter#115827.

• Added option to keep using the M2 style Divider in M3. The in M3 used primary color tinted outlineVariant does not fit on any color. The M2 style based on black or white with opacity does. It is also less prominent than the M3 style and may be preferred. Set FlexSubThemesData property useM2StyleDividerInM3 to true to use the M2 style in M3. Defaults to false.

  • FlexColorScheme also sets ThemeData.dividerColor to ThemeData.colorScheme.outlineVariant when ThemeData.useMaterial3 is true. This keeps the in Flutter SDK to be deprecated ThemeData.dividerColor always same as actually used effective Divider color. Thus, if an app uses Theme.of(context).dividerColor while it still exists, to set a color to it, and expects it be the same color as effective Divider color, it will be so in FCS, regardless of if M2 or M3 is being used. This is not the case in Flutter SDK by default, see issue flutter/flutter#117755 for more information.

• Added elevation to FlexSubThemes.timePickerTheme, and make it use the dialog shared FlexSubThemesData.dialogElevation setting. This property does not yet exist in Flutter beta 3.7.0-1.4.pre. It is thus unsure if it will land in next stable Flutter, if it does not it will be commented and removed for the next FCS release as well.

• Added boolean tintedDisabledControls to FlexSubThemesData. If set to true, disabled widgets will get a hint of their active main color when disabled. In future minor versions, this will also apply to components that use own themed settings for disabled color, not only to the ones where disabled color controlled by ThemeData.disabledColor. Previously tinted disabled color for ThemeData.disabledColor was included and defined when FlexSubThemesData.interactionEffects was set to true. It is now instead controlled by this separate tinted disabled-controls setting. Defaults to true, for an FCS opinionated default. This matches past default when it was included in FlexSubThemesData.interactionEffects.

• Added boolean inputDecoratorFocusedHasBorder to FlexSubThemesData. Default to true. If set to false, there is no border on the InputDecorator, typically used by text fields, when the input decorator is focused. It controls the new parameter focusedHasBorder in FlexSubThemes.inputDecorationTheme.

• Added SchemeColor value inputDecoratorBorderSchemeColor to FlexSubThemesData. It is used to define and customize the border color of InputDecorator on e.g. TextField. It controls the new parameter borderSchemeColor in FlexSubThemes.inputDecorationTheme.

• Added appBarTheme and tabBarTheme to FlexSubThemes.

• Added Material 3 styling to TabBar when M3 is used. Use FlexTabBarStyle.flutterDefault to get the SDK default colors in M3 mode. TabBar may get more configuration options in the next FCS version.

• Added double value appBarScrolledUnderElevation to FlexSubThemesData. It is used to define and customize the themed scrolled under elevation of the AppBar. It controls the new parameter scrolledUnderElevation in FlexSubThemes.appBarTheme.

• Added SchemeColor value toggleButtonsUnselectedSchemeColor and toggleButtonsBorderSchemeColor to FlexSubThemesData. They are used to define and customize the themed unselected button and border color of ToggleButtons. They control the new parameters unselectedSchemeColor and borderSchemeColor in FlexSubThemes.toggleButtonsTheme.

• Added SchemeColor value sliderIndicatorSchemeColor, and enum FlexSliderIndicatorType value sliderValueIndicatorType, plus enum ShowValueIndicator value sliderShowValueIndicator to FlexSubThemesData. They control the new parameters valueIndicatorColor, valueIndicatorType and showValueIndicator in FlexSubThemes.sliderTheme.

• Added SchemeColor value drawerBackgroundSchemeColor and double values drawerRadius, drawerElevation to FlexSubThemesData. They control the new parameters backgroundSchemeColor, radius and elevation in new sub-theme FlexSubThemes.drawerTheme.

• Added menuTheme to FlexSubThemes, it provides styling for elevation, radius and background color with optional opacity for the new Mw components MenuAnchor, MenuBar and DropDownMenu. The same FlexSubThemesData that are used for PopupMenuButton are used to control this theme. Those are popupMenuRadius, popupMenuElevation, popupMenuSchemeColor, and popupMenuOpacity.

• Added timePickerElementRadius to FlexSubThemesData that can be used to control elementRadius in FlexSubThemes.timePickerTheme, it changes the themed border radius of the time input entry elements.

• Added segmentedButtonRadius, segmentedButtonSchemeColor, segmentedButtonUnselectedSchemeColor, segmentedButtonBorderSchemeColor and segmentedButtonBorderWidth to FlexSubThemesData they control the equivalent properties in the new FlexSubThemes.segmentedButtonTheme used to customize the SegmentedButton.

CHANGE

• Style change on tinted disabled components when opting in on tintedDisabledControls. It is visually breaking, but subtle. Disable opacity alpha and alpha blend constants where tuned, kDisabledAlphaBlend from 0xAA (67%) to 0xCC (80%) and kDisabledBackgroundAlpha from 0x31 (19%) to 0x26 (15%). The new tinted disable colors look better. They are close in style to default grey ones, with a subtle primary tint, while still being more legible than in previous versions. Opting in on tinted disabled components is still not yet available on all components. It is more available in M2 mode. In upcoming minor releases, tinted disabled components will be made available on all themed components and consistently applied in both M2 and M3 mode. More visual tuning of this feature may be required in later releases.

• Removed in version 6.1.0 included manual M3 elevation tint for BottomSheet and PopupMenuButton, in Flutter 3.7.0, the tint is included automatically as it should be and we no longer need the workaround.

• The ListTileThemeData was added to core defaults. It sets ListTileThemeData.tileColor to Colors.transparent if ThemeData.useMaterial3 is true. This is done to avoid issue: flutter/flutter#117700. This extra M3 core default theme fix will be removed as soon as the issue is fixed.

• Changed FlexColorScheme.bottomAppBarElevation to be nullable. In M2 mode if is null, it follows defined appBarElevation as before. In M3, it is kept null in order to default to M3's default elevation of 3, so that BottomAppBar get elevation tint by default. In M3 mode a minor spec deviation was noted in Flutter SDK and reported here flutter/flutter#118150.

• Changed FlexColorScheme default BottomAppBar color to be colorScheme.surface, same as Flutter default. Previously FlexColorScheme used colorScheme.background color as an opinionated default. The change is minor, and in many designs the color values are the same.

• The Material buttons ElevatedButton, OutlinedButton and TextButon, now only create custom sub-theme properties in Material 3 mode when using none default (none null) values. Previously, they created sub-themes for some properties corresponding to the default values. This task now falls back to the role of default widget behaviour, as it should. Effective styles are unchanged.

• Previously existing "native" Material 3 color schemes, materialBaseline, verdunHemlock and dellGenoa were changed to use Material 3 error colors, also in Material 2 mode and when not using seed colors.

• When making seed generated ColorScheme with a custom surfaceTint color. This tint color is now also used as seed-key for the neutral and neutral variant tonal palettes. Flutter SDK can only use
  primary color as seed-key for the neutral colors. This limitation in Flutter makes using a custom surfaceTint in seeded ColorSchemes less usable with often unappealing results. This happens because the custom tint color then differs from the slight primary tint that is hard coded into Flutter's seeded neutral colors used for surfaces and backgrounds, and the colors may clash. In FlexColorScheme the custom tint color is automatically also used to slightly tint the ne...