Releases: rydmike/flex_color_scheme
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
darkIsTrueBlack
now makessurface
color
8% darker instead of 6%. This change was needed to support overlay color
in dark mode when usingdarkIsTrueBlack
when 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
factorieslight
anddark
aresurfaceMode
, of type enumFlexSurfaceMode
and integerblendLevel
. Consider using them instead of previous
surfaceStyle
.
The surface color blend stylesurfaceStyle
is 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.useSubThemes
to 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 theFlexSubThemesData
class, passed to
FlexColorScheme.subThemesData
. - The
FlexSubThemesData
class provides parameters for easy adjustment
of corner radius in Widgets that useShapeBorder
or 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
ButtonThemeData
that 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
FlexThemeData
static extension onThemeData
.- FlexColorScheme Themes can now also be created with the new syntax
FlexThemeData.light
andFlexThemeData.dark
, instead of using
FlexColorScheme.light().toTheme
andFlexColorScheme.dark().toTheme
. - The
toTheme
method 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 usingFlexColorScheme
based opt-in sub themes. When
you make custom sub themes yourself, you often need access to
theColorScheme
that is defined in currentFlexColorScheme()
instance.
You can get it withFlexColorScheme().toScheme
. Then use this
this standardColorScheme
or 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
textTheme
andprimaryTextTheme
properties to
FlexColorScheme
to enable easy setup of customTextThemes
, without the
need to add a customTextTheme
via acopyWith
, plusmerge
with the
default text theme. -
New: Added
FlexColorScheme.dialogBackground
as a background surface
color that can be controlled and themed separately. -
New: Added
appBarOpacity
toFlexColorScheme.light()
anddark()
.
With it, you can apply themed opacity to theAppBar
background color to
the selectedFlexAppBarStyle
it is using. -
New: On the
FlexColorScheme
factorieslight
anddark
, exposed
theColor
propertiesprimary
,primaryVariant
,secondary
,
sedondaryVariant
,appBarBackground
,dialogBackground
anderror
.
They all default to null, but if provided they can be used as override values
to factory behaviors defined byscheme
,colors
,appBarStyle
,
surfaceMode
andsurfaceStyle
that
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.
InFlexColorScheme
it defaults to true. In FlutterThemeData.from
it
also default to true, but inThemeData
it 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
FlexSchemeData
objects inFlexColor
are 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
FlexThemeModeSwitch
got a bool propertyhasTitle
, if set
tofalse
it removes the title entirely. -
New: The
FlexThemeModeSwitch
got abuttonOrder
property using enum
FlexThemeModeButtonOrder
that 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.schemesList
is now aconst
for 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.blueWhale
for 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.sanJuanBlue
for easy access to it. - Rosewood - Rosewood red, with horses neck and driftwood theme.
Use enum valueFlexScheme.rosewood
for easy access to it. - Blumine - Blumine, easter blue and saffron mango theme.
Use enum valueFlexScheme.blumineBlue
for 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
FlexThemeData
extension syntax to create the
ThemeData
andsurfaceMode
to 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
accentColor
is being deprecated in Flutter SDKThemeData
starting
from version v2.3.0-0.1.pre.
Usage ofaccentColor
in 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 oldaccentColor
was
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
accentColor
for it. The resulting default dark mode style on text fields thus now remain
unchanged in FlexColorScheme even with this definition removed. If you
had usedaccentColor
in 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.dark
andFlexColorScheme.light
factories have a new
property calledswapColors
. If true, this will swapprimary
andprimaryVariant
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
swapColors
feature. It also exposes the logic behind the FlexColorScheme
dark and light themeusedColors
property. 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. TheusedColors
property 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.bahamaBlue
for easy access to it. - Mallard and valencia - Mallard green and Valencia pink colored theme.
Use enum valueFlexScheme.mallardGreen
for easy access to it. - Espresso and crema - Espresso dark brown and crema colored theme.
Use enum valueFlexScheme.espresso
for easy access to it. - Outer space stage - Outer space dark blue-grey and stage red theme.
Use enum valueFlexScheme.outerSpace
for 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%.
Version 2.1.1
[2.1.1] - March 30, 2021
- Change: Made the VoidCallback
onSelect
inFlexThemeModeOptionButton
nullable.
The optional callback allows for the button to be used e.g. as a trailing
widget in a ListTile. Keep it null to not have any callback, nor hover or Ink of its own, and use
the select event of the parent instead. When it is used as standalone button you
normally want to use this callback, but not if you want the parent to handle it, that use case was
not allowed with previous version.
Version 2.1.0
[2.1.0] - March 22, 2021
- Fix: Toggling
FlexColorScheme(transparentStatusBar)
from true to false, did not restore the
Android default status bar scrim, unless the app was completely rebuilt. This has been fixed. - Fix: When using
FlexColorScheme.themedSystemNavigationBar(useDivider)
in anAnnotatedRegion
, toggling
useDivider
from true to false, did not remove the system navigation bar divider again, unless the
app was completely rebuilt. This has been fixed, see API docs for more info. - Feature: The
FlexColorScheme.themedSystemNavigationBar
for styling the system navigation bar got a
new convenience propertysystemNavBarStyle
that takes aFlexSystemNavBarStyle
enum with values:system
: For default white system nav bar in light theme and black in dark theme mode.surface
: The system navigation bar will be the same color as active themecolorScheme.surface
color.
If your FlexColorScheme definition is set to use primary branded surface and background colors, the
same primary color blend that the surface color has received will be used.background
: The system navigation bar will be the same color as active themecolorScheme.background
color.
If your FlexColorScheme definition is set to use primary branded surface and background colors, the
same primary color blend that the background color has received will be used.scaffoldBackground
: The system navigation bar will be the same color as active themescaffoldBackground
color.
If your FlexColorScheme definition is set to use primary branded surface and background colors, the
same primary color blend that the scaffoldBackground color has received will be used.transparent
: An experimental feature. The goal is to make the system navigation bar fully transparent,
showing the background, while navigation buttons float over the background. This feature only works if it is
also configured in the Android embedder and on SDK 30 or higher.
More information in this example: https://github.com/rydmike/sysnavbar
- Examples: Added top status bar scrim toggle and system navigation divider and navbar style toggles to example 5.
These only work on Android builds and do not have any functionality on the live Web builds. - Tests: Added tests for the new features. Total 690 tests, coverage 99.76%.
Version 2.0.0
[2.0.0] - March 15, 2021
- First stable release of FlexColorScheme with sound null safety.
- Includes the changes from [2.0.0-nullsafety.1] and [2.0.0-nullsafety.2].
- Breaking: The by default enabled divider for
FlexColorScheme.themedSystemNavigationBar
has been
revised to be disabled by default. To use a divider on the top of the system navigation bar on Android,
you have to enabled it manually. This is more in line with expected default behavior.
Version 2.0.0-nullsafety.2
[2.0.0-nullsafety.2] - March 15, 2021
-
Migrated AppBar theming to use the implementation introduced in Flutter 2.0.0 instead of using
its own custom implementation for the "white" app bar theme. -
Minor change to the none default
tooltipsMatchBackground: true
border style, it now uses
the theme divider color as its default outline color. -
The static helper
FlexColorScheme.themedSystemNavigationBar
received three new properties
noAppBar
,invertStatusIcons
andsystemNavigationBarDividerColor
. The old property
nullContextBackground
was deprecated and replaced withsystemNavigationBarColor
. Example 5
has been updated to show how and when the new features can be used. -
As stated earlier in the documentation, as a planned change for version 2.0.0 the sub theme for
FloatingActionButtonThemeData
was removed. It is thus now null as in default Flutter ThemeData.
It still produces the same default theme as before, the ThemeData definition was just no
longer needed to do so. -
Number of tests increased from 639 to 661. Coverage 99.78%.
-
Updated the documentation. Added thumbnails to Appendix A. This pub.dev version is also to test the
thumbnails work and how they look on pub.dev before stable 2.0.0 release.See API documentation for more information.
Version 2.0.0-nullsafety.1
[2.0.0-nullsafety.1] - February 4, 2021
- First version with null-safety.
- Additional breaking: Removed in version 1.3.0 deprecated
FlexSchemeSurfaceColors.themeSurface
, use
FlexSchemeSurfaceColors.surfaceStyle
instead. - Number of tests reduced from 723 to 639 when all null related tests were removed.
Version 1.4.1
[1.4.1] - January 31, 2021
-
Added four new built-in color schemes.
- Barossa - Barossa red and cardin green theme.
Use enum valueFlexScheme.barossa
for easy access to it. - Shark and orange - Shark grey and orange ecstasy theme.
Use enum valueFlexScheme.shark
for easy access to it. - Big stone tulip - Big stone blue and tulip tree yellow theme.
Use enum valueFlexScheme.bigStone
for easy access to it. - Damask and lunar - Damask red and lunar green theme.
Use enum valueFlexScheme.damask
for easy access to it.
- Barossa - Barossa red and cardin green theme.
-
Improved Semantics for the ThemeMode Widget buttons.
-
Improved FlexThemeModeSwitch widget tests, makes and checks for system mode changes.
-
More tests, totally 723 tests, codecov is now > 99.5%.
-
Added GitHub actions to automate build and to publish the examples on the Web on a new release.
-
Minor changes to the examples. Modified to not need the
late
keyword when they are converted
to null safe versions. -
Documentation:
- Added the new color schemes to the documentation.
- Minor typo corrections.
Version 1.4.1 Pre-release
[1.4.1] - January 30, 2021 - Pre-release to test Web Example build trigger
-
Added four new built-in color schemes.
- Barossa - Barossa red and cardin green theme.
Use enum valueFlexScheme.barossa
for easy access to it. - Shark and orange - Shark grey and orange ecstasy theme.
Use enum valueFlexScheme.shark
for easy access to it. - Big stone tulip - Big stone blue and tulip tree yellow theme.
Use enum valueFlexScheme.bigStone
for easy access to it. - Damask and lunar - Damask red and lunar green theme.
Use enum valueFlexScheme.damask
for easy access to it.
- Barossa - Barossa red and cardin green theme.
-
Improved Semantics for the ThemeMode Widget buttons.
-
Improved the widget tests, makes and checks for system mode changes. Totally 723 tests, codecov > 99.5%.
-
Added GitHub actions to automate build and publish the examples on the web.
-
Minor changes to the examples. Modified to not need the
late
keyword when they are converted
to null safe versions. -
Documentation:
- Added the new color schemes to the documentation.
- Minor typo corrections.