Releases: rydmike/flex_color_scheme
Version 5.0.0-dev.2
v5.0.0-dev.2 - April 4, 2022
BREAKING
-
Completed in version 4.0.0 planned, for version 5.0.0, removal of
deprecated propertysurfaceStyle, including all its implementing classes,
enums and helpers:- Removed property:
surfaceStyleinFlexColorScheme.light. - Removed property:
surfaceStyleinFlexColorScheme.dark. - Removed: enum
FlexSurface, thatsurfaceStylewhere. - Removed: factory
FlexSchemeSurfaceColors.fromthat was used to create
surface using theFlexSurface. The factoryFlexSchemeSurfaceColors.blend
replaced in version 4.0.0 already when usingsurfaceModeandblendLevel. - Removed tests and modified tests needing to consider above removals.
- Removed property:
-
Deprecated property
useSubThemes. This property has no function after
4.2.0 stable and 5.0.0-dev.1. FlexColorScheme opinionated component sub-themes
are now created by adding a default constructorFlexSubThemesData()or one with
some custom property values set, tosubThemesData. This creates sub-themes
using the FlexColorScheme opinionated sub-themes. Removing this property makes the
API more consistent. It now follows the same design that is used forkeyColors
withFlexKeyColorsandtoneswithFlexTones.
Setting the propertyuseSubThemeswill not cause an error, it just has no effect.
You can safely remove it. The propertyuseSubThemeswill be removed in release 6.0.0. -
The property
navigationBarIsStyledinFlexSubThemesDatawas removed in
v5.0.0-dev.1 as no longer needed. It is now kind of back with a new broader
replacement calledFlexSubThemesData.useFlutterDefaults.
The in dev.1 version tested API-style to
set variousSchemeColorproperties to null, to get SDK default for them was not
nice. TheFlexSubThemesDatashould default to its own preferred
and recommended harmonized defaults when not defined. It is better to offer a
toggle that can be set, to when possible/offer an opt-out from some bigger style
differences from SDK defaults. This can be useful if one wants to create
custom component themes and wish to start from less opinionated ones.
The newuseFlutterDefaultsis false by default, and the sub-themes undefined
null values result in its own harmonized and recommended settings. By setting
it totruea bit messier and un-harmonized Flutter default are back. Currently,
this impacts different styles and colors onBottomNavigationBar,NavigationBar,
andNavigationRail. See API docs for details regarding
defaults with this flag on and off. -
The
FlexSubThemesDatapropertypopupMenuRadiusand the radius in
corresponding static sub-theme helperFlexSubThemes.popupMenuTheme,
now defaults to 4.
In versions before v5.0.0-dev.2 it defaulted to 10. The M3 spec for it
was not available when it was chosen originally. It was assumed to have
higher border radius like rest of designs. However, the spec has it
defined here now, and it
is 4. Since border radius default values are stated in FlexColorScheme
sub-theme design goals to follow the M3 design specs, it was updated to
match the spec. A bit higher rounding, may actually fit better with
the very round M3 design, try 8 or 10. It is very simple to change bach with
the API.
FIX
-
Pub.dev analysis does not like document references to deprecated Flutter
properties. Changed the primaryVariant and secondaryVariant references
in document comments toprimaryVariantandsecondaryVariant. Nor does it
like when you use tests to deprecated Flutter SDK members, removed them too,
they were not needed either after some redesign of a few tests. -
Fixed. When using sub-themes and selecting a
ColorSchemebased color, as
color for theAppBar, instead of usingabbBarStylein light and dark
factories, theappBarOpacitywas not applied to the selected color. The
priority of effectiveAppBarcolor was also revised to follow the norm,
which from lowest to highest is:abbBarStylein light/dark factories and ThemeData extensions, which
selects the used color from activeschemeorcolors, in the same
factories or extensions.appBarBackgroundSchemeColorinFlexSubThemesDatawhen used.appBarBackgroundin FlexColorScheme.
CHANGE
-
Changed the priority in FlexColorScheme when using direct input color
properties,colorSchemeinput and using key color seeded ColorScheme
generation. The new order is that inputcolorSchemeis in this rare use case
always overridden by the seed generateColorScheme. This allows us
to use acolorSchemeas input to seed generation, where this color
scheme could already have been externally seeded generated, but that we want
to modify by using custom FlexTones or surface blends in FleColorScheme.
The direct properties overrides the seeded color scheme as before, unless it
isprimary,secondary,tertiaryor their container colors. In that case
thekeyColors, "keep" property determines if those colors are kept or not. -
The
FlexSubThemesDatapropertyinputDecorationRadiuswas deprecated and
renamed toinputDecoratorRadius, to harmonize the other
InputDecorationproperty names inFlexSubThemesData.
The old name will be removed in release 6.0.0. -
Deprecated and renamed
navigationBarHighlightSchemeColorto
navigationBarIndicatorSchemeColorinFlexSubThemesData, to
harmonize the naming standard. Likewise, the parameterhighlightSchemeColor
ìnFlexSubThemes.navigationBarThemewas deprecated and replaced by
indicatorSchemeColor. The old names will be removed in release 6.0.0. -
In 5.0.0-dev.1, the renamed properties were deprecated and broken with 4.2.0.
They are still deprecated, but now fallback via the old properties. They
are no longer breaking. This concernsFlexSubThemesDataproperties:bottomNavigationBarSchemeColor->bottomNavigationBarSelectedLabelSchemeColornavigationBarTextSchemeColor->navigationBarSelectedLabelSchemeColornavigationBarMutedUnselectedText->navigationBarMutedUnselectedLabelnavigationBarIconSchemeColor->navigationBarSelectedIconSchemeColor
And
FlexSubThemes.navigationBarThemeproperties:textSchemeColor->selectedLabelSchemeColorunselectedTextSchemeColor->unselectedLabelSchemeColoriconSchemeColor->selectedIconSchemeColormutedUnselectedText->mutedUnselectedLabel
And
FlexSubThemes.bottomNavigationBarThemeproperties:baseSchemeColor->selectedLabelSchemeColor
The old property names will be removed in release 6.0.0.
NEW
-
Added
SchemeColorbased theming ofSnackBarbackground color via
snackBarBackgroundSchemeColorinFlexSubThemesDataand support for it
inFlexSubThemes. -
Changed the color values for
FlexColor.materialLightSecondaryContainerand
FlexColor.materialLightSecondaryContainerHc. These color properties
do not have any specification in Material 2 spec. Updated the colors values
that had been made up for dev.1 release to better match the design intent
of those colors for the new Material 3ColorScheme. -
Added
inputDecoratorUnfocusedBorderIsColoredtoFlexSubThemesDataand
support for it inFlexSubThemesviaunfocusedBorderIsColored. Previously
an unfocused or hovered border/underline always had a hint of selected
base color. Setting this to false, leaves it at the grey defaults used by
Flutter defaults. -
Added
navigationBarIndicatorOpacityandnavigationRailIndicatorOpacity
toFlexSubThemesData, to expose their already existing properties in
corresponding sub-themes used byFlexColorScheme.
DEMO APPS
- Themes Playground improvements:
- Added a new single panel "Page" view. The previous large masonry grid view
is still available. Both views can be used and switch to based on what
is appropriate when using different media sizes. - The switches to keep main input colors for primary, secondary, tertiary
and their containers, where separated so that their state and code
generation for light and dark theme mode are separate. This makes them
more useful for actual theme setup. Earlier you had to separate them by
editing the generated code. - Added display of SnackBar style to the Themed Material panel.
- Added display of more ListTile types.
- Added ColorScheme based color selection theming of SnackBar background color.
- Added CodeView as a panel of its own. It is now possible to view the
changes to generated code as settings are changed. In the
advanced view where one can keep it open and close other panels, except one
being operated in. In page view it is shown as last page, however if
the media is large enough, it is shown side-by-side with controls on current
page. This is a really handy view for studying what each control does in
the generated code. - Added missing code gen for button border radius.
- Fixed broken code gen for dark mode blend level.
- Decoupled all bundled theming controls in the app.
- Added individual override controls for border radius to all components.
- Added option to swap or not swap computed dark mode main and container color.
- Added indicator opacity controls to NavigationBar and NavigationRail.
- Reduced amount of pre-set defaults in the app, so it starts with simpler setup code.
- Changed the code gen style for dark mode when using from light mode computed dark theme.
- Changed the code gen, so it does not add any code when using API default values.
- Changed the ThemeService to use generic types.
- Added a new single panel "Page" view. The previous large masonry grid view
TESTS
- Finalized test updates. Now 1684 te...
Version 5.0.0-dev.1
v5.0.0-dev.1 - March 14, 2022
Version 5 is a big refactor with deprecation of previous variant based
color names in favor of container ones that were added to updated M3
based ColorScheme in Flutter 2.10.0. The same additions and changes are now
also introduced in FlexColorScheme. Despite being a very big release, with
many new features, actual breaking changes are very few and mostly concerns
in version 4 deprecated members and of course requiring minimum Flutter
2.10.0 to work.
The WIP updates now includes the version of the key color seeded M3 ColorScheme
usage intended for the final design. The feature supports seeding by not only
using a single primary key color, but also using separate key colors for
secondary and tertiary colors. The Flutter SDK ColorScheme.fromSeed only
support using a single color as seed. The primary, secondary and tertiary
color are used as key color seeds, when seeding is used, and by default all
three color are used as key for their respective tonal palette used by
the generated ColorScheme. Using secondary and teritary colors can each
optionally be turned OFF. If both are, the result is same as when using
ColorScheme.fromSeed, with the primary color as seed key color.
When using a key seed color generated ColorScheme, it may sometimes, e.g. for
branding purposes, be useful to lock a certain color in the resulting
ColorScheme to the actual key color value used for primary, secondary
and tertiary. FlexColorScheme includes scheme appropriate colors for
each of these color properties, as well
their containers. You can for each property define which ones you want to keep
as defined by these input colors, in the seed generated ColorScheme. You
can of course use this feature with custom input colors as well.
The bundled example 5, the Themes Playground is now fully up to date with all
the new features. Its updated code generation still
needs results verification.
There are also now in Flutter master channel more actual
M3 impacts and ThemeData color property deprecations commits landed in Flutter
master channel that I reviewed and prepared for in advance when possible.
Much work on tests, and readme documentation updates remain, but API docs are
up-to-date. And this book long change log should help. There are only a few
breaking changes, and most of them are rarely used properties, so migration
should be relatively easy, despite the long list of changes and new features.
BREAKING
-
Requires at least Flutter stable 2.10.0.This release uses new M3
ColorScheme
properties that are not included before Flutter version 2.10.0, as well
as theThemeDataflaguseMaterial3. -
Removed parameter
surfaceStylefromFlexThemeData
extensionsFlexThemeData.lightandFlexThemeData.darkthat uses
in version 4.2.0 already deprecated propertysurfaceStyleinFlexColorScheme
class. The same deprecated propertysurfaceStyleinFlexColorSchemeclass
is still available in 5.0.0-dev.1. In the stable release 5.0.0 it might
be removed as well. They were all scheduled for deprecation in version 5.0.0,
but keeping it around a bit longer in the main class in 5.0.0-dev releases
to prolong backwards API compatibility during development. Maybe I will keep
it in the release too, many tests need to be rewritten when they are removed. -
The enum
SchemeColorhas new values and past values are in a
new order. The order was changed to accommodate new color values and to
keep them in the same order as their corresponding color properties
in M3ColorScheme. The change of order is potentially breaking, but unlikely
to break anything in major ways, other than possibly local storage of selected
enum values. In the bundled samples you might for example see wrong color
selections loaded from local storage, just reset or select correct value
to fix it. -
To get more harmonized setup on opt-in sub themes for
NavigationBar,
BottomNavigationBarandNaivgationRaila few properties in
FlexSubThemesDataandFlexSubThemeshad to be modified and broken.
Impact is estimated to be low for most users.The following properties were renamed in
FlexSubThemesData:navigationBarTextSchemeColor->navigationBarSelectedLabelSchemeColornavigationBarMutedUnselectedText->navigationBarMutedUnselectedLabelnavigationBarIconSchemeColor->navigationBarSelectedIconSchemeColorbottomNavigationBarSchemeColor->bottomNavigationBarSelectedLabelSchemeColor
In
FlexThemeDatathe propertynavigationBarIsStyledwas removed. It is
no longer needed. The same end result it enabled can be achieved by
by setting all NavigationBar related properties inFlexSubThemesDatathat
have a none null default value to null.The following parameters were renamed in
FlexSubThemes.navigationBarTheme:textSchemeColor->selectedLabelSchemeColorunselectedTextSchemeColor->unselectedLabelSchemeColoriconSchemeColor->selectedIconSchemeColormutedUnselectedText->mutedUnselectedLabel
The following parameter wa renamed in
FlexSubThemes.bottomNavigationBarTheme:baseSchemeColor->selectedLabelSchemeColor
NEW
-
Added
useMaterial3to all theme constructors and factories. This is
the same flag as inThemeData, it does not have any major impact on
default themed widgets in Flutter 2.10.x. Opting in on opinionated
sub-themes, will however as before give opinionated component sub-themes that
result in Material 3 like styles. Similar look will become default widget
design in later Flutter SDK versions when using the flaguseMaterial3is
set to true. -
Added new properties
onPrimaryContainer,onSecondaryContainer,
tertiary,tertiaryContainer,onTertiaryandonTertiaryContainerto
the un-namedFlexColorSchemeconstructor and factories
FlexColorScheme.lightandFlexColorScheme.dark, as well as to extension
FlexThemeDatato extensionsFlexThemeData.lightandFlexThemeData.dark
onThemeData. -
In
FlexColoradded new color properties for all color values to cover the
new "Container" color properties in Flutter 2.10 new M3ColorScheme.
For every built-inFlexColor, there are now also these new color properties:primaryContainersecondaryContainertertiarytertiaryContainer
The previous color values maps as follows:
tertiary= oldsecondaryVariantcolor value, that is deprecated
for each color value.- Old
primaryVariant, is just deprecated for each color value.
The "variant" colors are still available as deprecated properties, and will
remain available until version 6.0.0. The old color properties and their values
still work as inputs, and they produce same equivalentColorSchemeresults
as before. This is done by the values still being assigned as fallback value
in custom schemes so that new:primaryContainer, if not assigned, falls back via oldprimaryVariant.secondaryContainer, if not assigned, falls back via oldsecondaryVariant.
When it comes to the new built-in scheme designs, the color used on past:
secondaryVariantwas a reasonable fit for new M3tertiarycolor property
and was used as its value.- The new properties
secondaryContainerand
tertiaryContainer, had to get new built-in color values that fit with
the M3 design intent for those color properties. This while considering the
valuesecondaryalready had, and the valuetertiarygot by being
assigned the color value of pastsecondaryVariant. - The new color property
primaryContaineralso needed a new color value. The
pastprimaryVariantis not the correct design fit for how the color
value is intended to be used in M3 Color design. - In many cases it was possible to make nice color schemes, by reshuffling
some existing color values and using colors from light scheme, in container
properties in dark scheme and vice versa. Sometimes new better tuned
color values were used. In all events allContainercolor properties
are new features in this release, so they are considered "new" even
if their color value might have been recycled from previous properties
in some cases. SomeContainercolor values may still be fine-tuned
before final 5.0.0 release, but it is unlikely.
-
In class
FlexSchemeColoradded new color properties
primaryContainerandsecondaryContainerthey replace
deprecated propertiesprimaryVariantandsecondaryVariant. The old
properties still work and are
used as fallback to the new ones when the new ones are not provided.
The previous properties are still available as deprecated, and will remain
available until version 6.0.0, or until they are removed from the Flutter
stable channel, whichever comes first. The properties for built-in schemes
were assigned to their new correspondingFlexColorvalues. -
In class
FlexSchemeColoradded new color definitions fromFlexColor
forFlexSchemeColor.tertiaryandFlexSchemeColor.tertiaryContainer. -
In class
FlexSchemeColortheFlexSchemeColor.secondaryContainer
andFlexSchemeColor.tertiaryContainershould be brighter versions of their
none container parent light mode and darker in dark mode. They receive
such color values via new correspondingFlexColorvalues. -
In factory
FlexSchemeColor.fromadded optional and nullable parameter
brightness. If not assigned, the factory works as before, producing a
completeFlexSchemeColorfrom just one or more color proper...
Version 4.2.0
v4.2.0 - January 24, 2022
-
New: Updated required Dart SDK to minimum 2.15 that Flutter 2.8.0 uses.
To use this release at least Flutter 2.8.0 is required. -
New: Added support for opinionated sub-theme for the new Material 3 based
NavigationBar. Flutter version 2.8.0 is the first stable version that
includes the new Material 3 design basedNavigationBar. -
Deprecated: The property
surfaceStylehas been deprecated. In
version 4.0.0 it was already recommended to use, the then introduced more
powerful surface branding propertiessurfaceModeandblendLevelinstead.
ThesurfaceStyleproperty is still available and works as before, but you
now get a deprecation warning if it is used. The property and all its related features
will be completely removed in version 5.0. -
New: Custom
FlexColorSchemebased themes can now also be defined by
alternatively passing in aColorSchemeobject to thecolorScheme
property in default the constructor, as well as inFlexColorScheme.lightand
FlexColorScheme.darkfactories. When used it overrides theschemeand
colorsproperties in the factories. Same color property in any constructor
that exist as direct property in the constructors, still have the highest
priority and will also override corresponding color properties in passed in
colorScheme. The capability to make custom FlexColorScheme based themes from
standard Flutter color schemes is useful if you already have a predefined
elaborateColorSchemedefinition. You can now use it directly and still
use FlexColorScheme for its surface color branding and easy sub-theming.
This capability will also be very useful when Material 3 basedColorScheme
in Flutter SDK arrives in the stable channel. With Material 3, color schemes
may be created using new Material 3 design based color tools, e.g. from
seed color(s) or using dynamic colors extracted from system wallpaper colors.
With this feature it will then be able to feed those colors directly into
FlexColorScheme, and use them as colors to create yourThemeData. -
Changed: All properties in all
FlexColorSchemeconstructors are now
optional. The change is none breaking, and uses Material 2 based
design guide example theme light and dark as defaults for undefined values. -
New: Added a
ColorSchemecolor selection option to selected opinionated
sub-themes configuration classFlexSubThemesData. The sub-themes that
support changing theirColorSchemebased
used theme color selection, have one or more properties called
nnnSchemeColorwherennndescribes the color feature that can be set
to an alternativeColorSchemebased color and not just its pre-defined
ColorSchemebased color property.
The color selector is aSchemeColorenum property value that is used to
select the enum value that corresponds to same named color
property value intheme.colorScheme. ThisSchemeColorcolor quick
selection option has been added to:- Theming
TextFieldviaFlexSubThemes.inputDecorationThemeto select a
base color for the border and fill color. TabBarsub-theming to select its indicator color, when you want it to be a
different color than the color of theTabBaricon and text, which are
controlled viaFlexTabBarStylein theFlexColorScheme.tabBarStyle
property as before. It gives you an easy option to override the indicator
color with any of the theme'scolorSchemecolors.- To
BottomNavigationBarviaFlexSubThemes.bottomNavigationBarto set the
preferred color of the icon and label text in the Material 2 based
BottomNavigationBar, as well as used container background color. NavigationBarinFlexSubThemes.navigationBarThemeto set the
preferredColorSchemecolor of the text, icon in the Material 3 based
NavigationBar, as well as the pill shaped highlight color separately that
surrounds the selected icon and its container background color.ChipThemeDatafromFlexSubThemes.chipThemeto change the used
ColorSchemebased base color of Chips.
- Theming
-
The
SchemeColorproperties for the above sub-themes have a default selection
that results in sameColorSchemecolor values being used as they had
before. The additional configuration options are none breaking. The enum
properties to modify the usedColorSchemecolor can be defined in the
configuration classFlexSubThemesDatausing its new properties:inputDecoratorSchemeColorchipSchemeColortabBarIndicatorSchemeColorbottomNavigationBarUsedColorbottomNavigationBarSchemeColorbottomNavigationBarBackgroundSchemeColornavigationBarIconSchemeColornavigationBarTextSchemeColornavigationBarHighlightSchemeColornavigationBarBackgroundSchemeColor
-
Usage examples of the above new configuration possibilities have been added to
the default example, the so-called developers hot reload playground. -
The ColorScheme color selection in
SchemeColorincludes all colors in
ColorSchemesupported by Flutter 2.8. You may want to avoid using the
primaryVariantandsecondaryVariantcolors if you want to avoid later
migrations. These variant colors are being deprecated in Flutter SDK,
see #93427. -
A later FlexColorScheme version will add support for the new Material 3
colors inColorSchemewhen they land in the stable channel. -
This quick selection of
ColorSchemebased colors as none standard themed
colors of widget sub-themes, may be extended to a few more sub-themes in
future versions. At least if it is seen as a practical and quick way to
customize widget sub-theme colors within the constraints of colors in
thetheme.colorScheme. -
As before you can still apply your own total custom sub-themes to the
ThemeDatacreated withFlexColorSchemeby usingcopyWith.
FlexColorScheme is a way to easily make fancy and color wise consistent and
balancedThemeDataobjects using convenience shortcut properties and
methods. It does not prevent you from further modifying and tuning the
producedThemeDatawith standard Flutter SDK features. -
Removed: The
uses-material-design: trueline from library
pubspec.yamlfile was removed. It is not needed since Material icon
features are not used by this package. -
Example 5 - Themes Playground
- Fixed onColor for a few colors in the ThemeData color presentation boxes
for cases where it might differ from colorScheme onColors. This could happen
when disabling FlexColorScheme. - Fixed index on _AppBarSettings card.
- Changed the feature that animate hides not available options based on selections
to a version that disables them and resets their state while disabled.
Plus a few controls are hidden but take up same space.
Hiding the controls caused the panels to change size, often causing relayout
of the masonry grid layout. This was confusing UX, as entire panels might
move into new places. While the UI hide animations were cool, this keeps
the panels in same place in the grid, which is less confusing to use.
Panels can still be closed and it of course causes relayout of the grid too,
but in that use case it is expected. - Changed ColorScheme indicator boxes to use the themed border radius.
- Added a button to copy theme, and improved the explanations to make the
functionality more obvious and accessible. Previously only the entire
ListTile was the button, this UI with no button was not so clear. Now
there is also a button that says COPY. Clicking on the ListTile still
works as well. - Add and updated app icon resources used by all the example apps.
- Update to new breaking version of StaggeredGridview 0.6.0. It no longer
requires previously used bug work around(s) for a window resize issue that
had existed since 2019. For more info on this solved issue, see this
article. - Added most new features in version 4.2.0 to the Themes Playground app and
its theme code generation.
- Fixed onColor for a few colors in the ThemeData color presentation boxes
-
Example theme - Copy Playground Theme
- Added a new simple template example, that is handy for trying copy-pasted
theme setup code, generated by the Themes Playground example 5.
- Added a new simple template example, that is handy for trying copy-pasted
-
Documentation: Reviewed and corrected many API docs. The API docs are
very thorough and complete. They usually cover any question you might have and
more. Added a brief "API Intro and Guide" chapter to the readme. -
Tests: Added tests to cover the new features, now total 1123 tests.
Version 4.1.1
[4.1.1] - November 20, 2021
- Documentation: Fixed a broken link in the readme that pub.dev analyser found.
- This release was previously not published on GitHub, because it is basically the same release as 4.1.0, but with a readme.md fix needed for pub.dev, since it caused a score reduction on pub.dev.
Version 4.1.0
[4.1.0] - November 20, 2021
-
Fix: The
defaultRadiusinFlexSubThemesDatanow defaults to null
so all sub-themes border radius will default to M3 default border
radius per widget. The const default value it had was a remnant from early
dev phase when widgets all defaulted to single shared radius and not M3
defaults per widget type. If you explicitly passed in null, you did also in
previous version get the M3 defaults. Older tests did that, now they expect
same result when no value is assigned, as it should have been. -
Examples: Updated and tuned the examples. Example 5 "Themes Playground"
now includes capability to define custom color schemes starting from built-in ones.
It can also generate the FlexColorScheme setup code needed for any defined
viewed theme setup. You can copy/paste a theme's Flutter Dart code,
from the Themes Playground to your app and use it as its theme. This is a very
quick and convenient way to try a theme you made and see in the Themes
Playground in your own app. -
Opt in opinionated sub themes minor style changes:
- Added missing themed background color for
SnackBarThemeDatawhen
using opt in opinionated sub themes. - Tuned the colored text theme on the sub themes that is applied when
using the optional colored text themes. The text styles now better match
the regular none colored style,
and they are a bit more subtle. Text stylecaptiongot a bit
of opacity. M2 designed widgets likeListTile, depend on it for
making more muted subtitles by default forListTilevia the heading level
opacity oncaptiontext style. The opacity on it is lower though, to
retain a bit more contrast on blended surfaces, while still adhering to
the style intent.Minor details on the opinionated sub themes may still be tuned and
changed slightly as a part of improving them and their appeal. For the
text theme coloring future version may expose parameter(s) that can be
used to adjust the color tint effect on text theme when colored
text theme is enabled.
- Added missing themed background color for
-
Major updates to readme doc, and typo corrections.
-
Tests:
- Modified tests to catch the fixed
defaultRadiusissue. - Added more tests, now total 1069 tests.
- Modified tests to catch the fixed
Version 4.0.0-example.5
[4.0.0-example.5] - November 18, 2021
- Package wise this is the same version as 4.0.0, but the examples were updated in this release. Example 5 got custom scheme feature and capability to get the code for the theme. Also testing the CI/CD build and deploy script with this release.
Version 4.0.0
[4.0.0] - November 13, 2021
-
The new V4 docs are still a bit lacking and will be improved in docs
updates later. -
The breaking case is a minor difference in produced style for true
black mode. Version 4.0.0 is still fully API compatible with version 3.
Version 4.0.0 does however contain so many new
features, that it in itself warrants a new major release bump. -
Breaking: In dark mode, the
darkIsTrueBlacknow makessurfacecolor
8% darker instead of 6%. This change was needed to support overlay color
in dark mode when usingdarkIsTrueBlackwhen using the newsurfaceMode
property. For more information see Flutter SDK
issue 90353. -
Fix/Breaking: From the color scheme English descriptions the sentence
end "." was removed from all description strings. If and when you want one,
you can add it as needed. -
New: Added a more flexible and powerful alpha blending feature for
surface and background colors. The new properties in theFlexColorScheme
factorieslightanddarkaresurfaceMode, of type enumFlexSurfaceMode
and integerblendLevel. Consider using them instead of previous
surfaceStyle.
The surface color blend stylesurfaceStyleis still default, and not yet
deprecated, but may be so in later versions. It is not really needed anymore,
but there was no major reason to break things by removing it either. -
New: Major new feature; easy sub-theming of Flutter SDK UI widgets.
- You can opt in on nice looking opinionated widget sub-themes by setting
FlexColorScheme.useSubThemesto true, it is false by default. - The default settings for the sub-theme is inspired by
Material 3 design (M3) It mimics it to large extent
when using default value sub-theme values and settings. The varying corner
radius is different per widget type. The new TextTheme Typography is also
included. All parts cannot be made to look exactly like M3 in Flutter when using
Material 2 design (M2), but many parts
can, and where possible the defaults try follow those values. You can of
course override the default. - You can tweak these sub themes with a number of parameters
defined in theFlexSubThemesDataclass, passed to
FlexColorScheme.subThemesData. - The
FlexSubThemesDataclass provides parameters for easy adjustment
of corner radius in Widgets that useShapeBorderor decorations, that
support changing the Widget's corner radius. With the sub themes enabled, you
can easily create a theme with a consistent corner radius on built-in
Flutter SDK UI widgets. - The widget sub-themes also harmonize a few other styles, e.g.
ToggleButtons
to match the standard buttons regarding size and design as far as possible. - In case you still use the old deprecated buttons, they also get
ButtonThemeDatathat as far as possible match the same style. - Via the sub themes it is by default opted-in to also use a bit Material You
like coloring on the text styles. This can also be opted out of, even if
otherwise opting in on sub-themes, it is on by default when opting in on
sub themes.
- You can opt in on nice looking opinionated widget sub-themes by setting
-
New: Added
FlexThemeDatastatic extension onThemeData.- FlexColorScheme Themes can now also be created with the new syntax
FlexThemeData.lightandFlexThemeData.dark, instead of using
FlexColorScheme.light().toThemeandFlexColorScheme.dark().toTheme. - The
toThememethod is still available and works as before. It will not
be deprecated. It is needed when making elaborate custom sub themes beyond
what is offered when usingFlexColorSchemebased opt-in sub themes. When
you make custom sub themes yourself, you often need access to
theColorSchemethat is defined in currentFlexColorScheme()instance.
You can get it withFlexColorScheme().toScheme. Then use this
this standardColorSchemeor any of its colors, in your custom sub theme
definitions, that you then add with copyWith to your FlexColorScheme based
theme, likeFlexColorScheme().toTheme.copyWith(..."your sub themes and other ThemeData over-rides here").
- FlexColorScheme Themes can now also be created with the new syntax
-
New: Added
textThemeandprimaryTextThemeproperties to
FlexColorSchemeto enable easy setup of customTextThemes, without the
need to add a customTextThemevia acopyWith, plusmergewith the
default text theme. -
New: Added
FlexColorScheme.dialogBackgroundas a background surface
color that can be controlled and themed separately. -
New: Added
appBarOpacitytoFlexColorScheme.light()anddark().
With it, you can apply themed opacity to theAppBarbackground color to
the selectedFlexAppBarStyleit is using. -
New: On the
FlexColorSchemefactorieslightanddark, exposed
theColorpropertiesprimary,primaryVariant,secondary,
sedondaryVariant,appBarBackground,dialogBackgroundanderror.
They all default to null, but if provided they can be used as override values
to factory behaviors defined byscheme,colors,appBarStyle,
surfaceModeandsurfaceStylethat
otherwise via the factories define the colors for these properties. If a value
for one of the new direct color properties is used with the factory, it always
has precedence over other properties that assign or compute colors for it. -
New: Exposed boolean property
applyElevationOverlayColor. It has the same
function as the same property inThemeData. It applies a semi-transparent
overlay color on Material surfaces to indicate elevation for dark themes.
InFlexColorSchemeit defaults to true. In FlutterThemeData.fromit
also default to true, but inThemeDatait defaults to false.
The property is just available for convenience, so you can avoid acopyWith
if you wish to turn it off. It is not necessarily needed or even desired when
using strong alpha blends on surfaces in dark mode, to use an elevation
overlay color. -
New: All
FlexSchemeDataobjects inFlexColorare exposed as static
const objects, making them easy to pick and reuse as const objects
individually in custom color scheme lists, or as input to thecolors
property. Previously only the individual color value definitions were exposed. -
New: Added convenience extension
.blendAlpha()onColor
inFlexColorExtensions. -
New: The
FlexThemeModeSwitchgot a bool propertyhasTitle, if set
tofalseit removes the title entirely. -
New: The
FlexThemeModeSwitchgot abuttonOrderproperty using enum
FlexThemeModeButtonOrderthat you can use to define the order of its
light, system and dark theme mode buttons, in all possible combinations. -
New: Added edgeToEdge support to
FlexColorScheme.themedSystemNavigationBar. This brings the previously
experimental support for transparent system navigation bar in Android
into the supported fold in FlexColorScheme. Its functionality
requires min Android SDK level 29, but other than that it works without
Android setup shenanigans. No added APIs, the API for it already existed
in previous version of FlexColorScheme, using it did however require
special Android build configuration setup, this is no longer required. -
Change: The
FlexColor.schemesListis now aconstfor improved
efficiency. -
New color schemes: Added four new built-in color schemes.
Total number of color schemes is now 36 matched light and dark pairs.- Blue whale - Blue whale, jungle green and outrageous tango orange.
Use enum valueFlexScheme.blueWhalefor easy access to it.
This theme is final and selected for inclusion as a new one. - San Juan blue - San Juan blue and pink salmon theme.
Use enum valueFlexScheme.sanJuanBluefor easy access to it. - Rosewood - Rosewood red, with horses neck and driftwood theme.
Use enum valueFlexScheme.rosewoodfor easy access to it. - Blumine - Blumine, easter blue and saffron mango theme.
Use enum valueFlexScheme.blumineBluefor easy access to it.
- Blue whale - Blue whale, jungle green and outrageous tango orange.
-
Documentation:
- The new main example is a complete quick start guide that doubles as
"developers" hot reload based playground template. It has comments
explaining what is going on.
If you skip reading the readme docs and tutorial, the example may help
to kick-start using FlexColorScheme and all its features. It shows most
of the features in last tutorial example 5, but without any interactive UI.
You are the UI and can edit prop values and use hot-reload to see changes. - All examples now use the new
FlexThemeDataextension syntax to create the
ThemeDataandsurfaceModeto define the alpha blended surfaces. - Examples 2 to 5 also use the in Flutter 2.5 new skeleton architecture with
a ChangeNotifier based controller, AnimatedBuilder to listen to it and
an abstract service to get and persist the theme settings, with a concrete
in-memory implementation, plus the implementations to persist the theme.- Examples 2 to 4 use the Hive implementation.
- Example 5 uses the SharedPreferences implementation
- The new main example is a complete quick start guide that doubles as
-
Tests:
- Added tests for the new features, total 1066 tests,
- Coverage 99%, will improve them more later.
Version 4.0.0-dev.1
[4.0.0-dev.1] - November 13, 2021
-
The breaking case refer to a minor difference in produced style for true
black mode. Version 4.0.0 is still fully API compatible with version 3.
Major version was bumped due to the small change in produced output in some
rare usage options. Version 4.0.0 does however contain so many new
features, that it in itself warrants a new major release bump. -
Breaking: In dark mode, the
darkIsTrueBlacknow makessurfacecolor
8% darker instead of 6%. This change was needed to support overlay color
in dark mode when usingdarkIsTrueBlackwhen using the newsurfaceMode
property. For more information see Flutter SDK
issue 90353. -
Fix/Breaking: From the color scheme English descriptions the sentence
end "." was removed from all description strings. If and when you want one,
you can add it as needed. -
New: Added a more flexible and powerful alpha blending feature for
surface and background colors. The new properties in theFlexColorScheme
factorieslightanddarkaresurfaceMode, of type enumFlexSurfaceMode
and integerblendLevel. Consider using them instead of previous
surfaceStyle.
The surface color blend stylesurfaceStyleis still default, and not yet
deprecated, but may be so in later versions. It is not really needed anymore,
but there was no major reason to break things by removing it either. -
New: Major new feature; easy sub-theming of Flutter SDK UI widgets.
- You can opt in on nice looking opinionated widget sub-themes by setting
FlexColorScheme.useSubThemesto true, it is false by default. - The default settings for the sub-theme is inspired by
Material 3 design (M3) It mimics it to large extent
when using default value sub-theme values and settings. The varying corner
radius is different per widget type. The new TextTheme Typography is also
included. All parts cannot be made to look exactly like M3 in Flutter when using
Material 2 design (M2), but many parts
can, and where possible the defaults try follow those values. You can of
course override the default. - You can tweak these sub themes with a number of parameters
defined in theFlexSubThemesDataclass, passed to
FlexColorScheme.subThemesData. - The
FlexSubThemesDataclass provides parameters for easy adjustment
of corner radius in Widgets that useShapeBorderor decorations, that
support changing the Widget's corner radius. With the sub themes enabled, you
can easily create a theme with a consistent corner radius on built-in
Flutter SDK UI widgets. - The widget sub-themes also harmonize a few other styles, e.g.
ToggleButtons
to match the standard buttons regarding size and design as far as possible. - In case you still use the old deprecated buttons, they also get
ButtonThemeDatathat as far as possible match the same style. - Via the sub themes it is by default opted-in to also use a bit Material You
like coloring on the text styles. This can also be opted out of, even if
otherwise opting in on sub-themes, it is on by default when opting in on
sub themes.
- You can opt in on nice looking opinionated widget sub-themes by setting
-
New: Added
FlexThemeDatastatic extension onThemeData.- FlexColorScheme Themes can now also be created with the new syntax
FlexThemeData.lightandFlexThemeData.dark, instead of using
FlexColorScheme.light().toThemeandFlexColorScheme.dark().toTheme. - The
toThememethod is still available and works as before. It will not
be deprecated. It is needed when making elaborate custom sub themes beyond
what is offered when usingFlexColorSchemebased opt-in sub themes. When
you make custom sub themes yourself, you often need access to
theColorSchemethat is defined in currentFlexColorScheme()instance.
You can get it withFlexColorScheme().toScheme. Then use this
this standardColorSchemeor any of its colors, in your custom sub theme
definitions, that you then add with copyWith to your FlexColorScheme based
theme, likeFlexColorScheme().toTheme.copyWith(..."your sub themes and other ThemeData over-rides here").
- FlexColorScheme Themes can now also be created with the new syntax
-
New: Added
textThemeandprimaryTextThemeproperties to
FlexColorSchemeto enable easy setup of customTextThemes, without the
need to add a customTextThemevia acopyWith, plusmergewith the
default text theme. -
New: Added
FlexColorScheme.dialogBackgroundas a background surface
color that can be controlled and themed separately. -
New: Added
appBarOpacitytoFlexColorScheme.light()anddark().
With it, you can apply themed opacity to theAppBarbackground color to
the selectedFlexAppBarStyleit is using. -
New: On the
FlexColorSchemefactorieslightanddark, exposed
theColorpropertiesprimary,primaryVariant,secondary,
sedondaryVariant,appBarBackground,dialogBackgroundanderror.
They all default to null, but if provided they can be used as override values
to factory behaviors defined byscheme,colors,appBarStyle,
surfaceModeandsurfaceStylethat
otherwise via the factories define the colors for these properties. If a value
for one of the new direct color properties is used with the factory, it always
has precedence over other properties that assign or compute colors for it. -
New: Exposed boolean property
applyElevationOverlayColor. It has the same
function as the same property inThemeData. It applies a semi-transparent
overlay color on Material surfaces to indicate elevation for dark themes.
InFlexColorSchemeit defaults to true. In FlutterThemeData.fromit
also default to true, but inThemeDatait defaults to false.
The property is just available for convenience, so you can avoid acopyWith
if you wish to turn it off. It is not necessarily needed or even desired when
using strong alpha blends on surfaces in dark mode, to use an elevation
overlay color. -
New: All
FlexSchemeDataobjects inFlexColorare exposed as static
const objects, making them easy to pick and reuse as const objects
individually in custom color scheme lists, or as input to thecolors
property. Previously only the individual color value definitions were exposed. -
New: Added convenience extension
.blendAlpha()onColor
inFlexColorExtensions. -
New: The
FlexThemeModeSwitchgot a bool propertyhasTitle, if set
tofalseit removes the title entirely. -
New: The
FlexThemeModeSwitchgot abuttonOrderproperty using enum
FlexThemeModeButtonOrderthat you can use to define the order of its
light, system and dark theme mode buttons, in all possible combinations. -
New: Added edgeToEdge support to
FlexColorScheme.themedSystemNavigationBar. This brings the previously
experimental support for transparent system navigation bar in Android
into the supported fold in FlexColorScheme. Its functionality
requires min Android SDK level 29, but other than that it works without
Android setup shenanigans. No added APIs, the API for it already existed
in previous version of FlexColorScheme, using it did however require
special Android build configuration setup, this is no longer required. -
Change: The
FlexColor.schemesListis now aconstfor improved
efficiency. -
New color schemes: Added four new built-in color schemes.
Total number of color schemes is now 36 matched light and dark pairs.- Blue whale - Blue whale, jungle green and outrageous tango orange.
Use enum valueFlexScheme.blueWhalefor easy access to it.
This theme is final and selected for inclusion as a new one. - San Juan blue - San Juan blue and pink salmon theme.
Use enum valueFlexScheme.sanJuanBluefor easy access to it. - Rosewood - Rosewood red, with horses neck and driftwood theme.
Use enum valueFlexScheme.rosewoodfor easy access to it. - Blumine - Blumine, easter blue and saffron mango theme.
Use enum valueFlexScheme.blumineBluefor easy access to it.
- Blue whale - Blue whale, jungle green and outrageous tango orange.
-
Documentation:
- The new main example is a complete quick start guide that doubles as
"developers" hot reload based playground template. It has comments
explaining what is going on.
If you skip reading the readme docs and tutorial, the example may help
to kick-start using FlexColorScheme and all its features. It shows most
of the features in last tutorial example 5, but without any interactive UI.
You are the UI and can edit prop values and use hot-reload to see changes. - All examples now use the new
FlexThemeDataextension syntax to create the
ThemeDataandsurfaceModeto define the alpha blended surfaces. - Examples 2 to 5 also use the in Flutter 2.5 new skeleton architecture with
a ChangeNotifier based controller, AnimatedBuilder to listen to it and
an abstract service to get and persist the theme settings, with a concrete
in-memory implementation, plus the implementations to persist the theme.- Examples 2 to 4 use the Hive implementation.
- Example 5 uses the SharedPreferences implementation
- The new main example is a complete quick start guide that doubles as
-
TODO Documentation:
- Some older documentation that is not relevant was removed, like older APIs
no longer described in read me, only in API docs. - Almost all screenshots will need to be updated. (sigh)
- Typo review and corrections.
- Some older documentation that is not relevant was removed, like older APIs
-
TODO Tests:
- Added tests for the new features, total 1066 tests,
- Coverage is 98%, a few more tests to be added before release.
Version 3.0.1
[3.0.1] - July 1, 2021
- Fix: The internal order of swapping primary and secondary colors and reducing
used colors in static functionFlexSchemeColor.effective(FlexSchemeColor colors, int usedColors, {bool swapColors = false})matters for the intended result when
used together in the same call. The function now swaps primary and secondary colors,
before reducing the used colors. - Tests: Added tests for above fix that captures the issue and fails
in version 3.0.0. Total 741 tests, coverage 99.75%. - Documentation and typo fixes.
Version 3.0.0
[3.0.0] - June 25, 2021
-
Breaking: The color
accentColoris being deprecated in Flutter SDKThemeDatastarting
from version v2.3.0-0.1.pre.
Usage ofaccentColorin FlexColorScheme is removed to support this
transition. The property is deprecated in FlexColorScheme, but is still present. Its
usage does however no longer have impact on produced themes, this is a potential breaking change.
The probability that you might have used it as a property in your
FlexColorScheme based theme is low. It was set before to primary color
in FlexColorScheme, as a way to make the highlight color of outlines and underlines on
text field boxes primary colored in dark theme mode, and not secondary/accent colored as they used
to bve in Flutter's default dark theme mode. The oldaccentColorwas
not used for anything else in themes anymore when using FlexColorScheme.
The property is now going away totally
in Flutter SDK. The default ThemeData in Flutter SDK in dark mode now creates a
theme for outline and underline indicators on input fields that are based on primary color,
just like FlexColorScheme does and already did before. Flutter SDK no longer uses
accentColorfor it. The resulting default dark mode style on text fields thus now remain
unchanged in FlexColorScheme even with this definition removed. If you
had usedaccentColorin FlexColorScheme as a short-cut to define a different text field
outline or underline highlight color in dark theme mode than primary color, then you will need to
recreate it via text field decoration theming. -
New: The
FlexColorScheme.darkandFlexColorScheme.lightfactories have a new
property calledswapColors. If true, this will swapprimaryandprimaryVariant
colors with their secondary counter-parts.This flag can be set to true if you want to make a theme where your primary and secondary
colors are swapped compared to their definition. It is useful if you want to quickly
swap primary and secondary colors when using the pre-defined color
schemes or with computed dark schemes from light schemes. It doubles the
variation possibilities of themes based on the pre-defined color schemes.If you are explicitly defining all you light or dark scheme colors, you can of course define
them in desired order. This feature will still swap whatever
colors you defined for primary and secondary when set to true. You can thus also
use this feature as an easy end-user modifiable theme option, if you like
to offer the capability to toggle the primary and secondary theme colors the
other way around. -
New: The static function
FlexSchemeColor.effective(FlexSchemeColor colors, int usedColors, {bool swapColors = false})is used to implement the above
swapColorsfeature. It also exposes the logic behind the FlexColorScheme
dark and light themeusedColorsproperty. This static method is helpful if
you need to compute effective built-in theme colors externally to FlexColorScheme
to present the active theme, based on these settings. This is used by example 5
to change the colors on the theme mode switch when the swap color settings
is toggled. TheusedColorsproperty is not shown in any bundled
example, but it can be used the same way. -
New color schemes: Added four new built-in color schemes.
- Bahama and trinidad - Bahama blue and trinidad orange colored theme.
Use enum valueFlexScheme.bahamaBluefor easy access to it. - Mallard and valencia - Mallard green and Valencia pink colored theme.
Use enum valueFlexScheme.mallardGreenfor easy access to it. - Espresso and crema - Espresso dark brown and crema colored theme.
Use enum valueFlexScheme.espressofor easy access to it. - Outer space stage - Outer space dark blue-grey and stage red theme.
Use enum valueFlexScheme.outerSpacefor easy access to it.
Inspired by MaterialYou at GoogleIO 2021, I recently hooked up FlexColorScheme
with an algorithm that extracts prominent colors from images. Then fed these
colors to FlexColorScheme to make themes from them. The above new color schemes in
release 3.0.0 came from these image based theme experiments. You can see examples
of FlexColorScheme making color schemes and themes from images in my Tweets about it.
This was a first quick test
of the idea, later I added some more features to it, here and here. This
quick test shows that FlexColorScheme is very versatile. - Bahama and trinidad - Bahama blue and trinidad orange colored theme.
-
Tests: Added tests for the new features and removed test related to
accentColor. Total 736 tests, coverage 99.76%.