-
-
Notifications
You must be signed in to change notification settings - Fork 104
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
FloatingActionButtonTheme not set? #2
Comments
Hi @jlnrrg thanks for using FlexColorScheme and thanks for your question. Let's see if we can sort it out. First a QuestionFor the above example, just to be clear, what color where you expecting on the FAB? In the used example, with the used scheme Did you expect some other color? If so, which one? You can certainly modify it via custom theme modification too, more about that in an example further below. Standard Theming DefaultsSome background basics regarding sub theme's in Flutter. Yes by default, with the new standard in Flutter, they are moving towards that all sub themes are NULL by default (background info) and also to color wise be defined by For the FAB, this is in the FAB code defined so that when widget Different look with Legacy ThemeBy default the For the FAB case there is however not any practical difference. The first one in the past gave a FAB that used to use the so called FlexColorScheme FAB ThemeYou are right that
In the latest stable Flutter version the above is actually not needed anymore, since it is the same color result as we would get if would just have left Why does it exist? It is a sad remnant, in some older versions of Flutter, a few stable versions back I think (FlexColorScheme existed for quite a while before I published it), I got some some deprecated warning if I did not add this definition to the I now get the same color on the FAB even if I remove this definition from the I would actually prefer to not define it all anymore and keep it as null, but I cannot remove it anymore in version 1.x.x since it would be a small breaking change. If some user has made code that depends on The upcoming null safe version will be a breaking change anyway (2.x.x), so I think I will remove this no longer needed definition from it. As I really only want to make sub-theme definitions when I really have to in order to produce the result I designed for FlexColorScheme. None null Sub Themes in FlexColorSchemeYou raised a good question here. Which sub-theme data objects are actually none NULL when using Since there are indeed some, like the above mentioned FAB case for now. I should add a clear list to the documentation that lists these sub-themes and also which properties are set. I will see about getting that done for the next release as well. THanks for the input on this! 😃 It is there already in a way in the long list at the end, but it could be written in a much nicer cleaner way. The current list is just something I copied from my code comments. ColorScheme's and FAB examplesI always like examples when I want to understand something, so I made one using your usage of the Mandy Red scheme as well. Maybe it will help explaining what is going on as well. You can find the simple code for this example in this Gist.
It contains three theme examples made from three different color schemes.
The example is otherwise just the standard counter app, but I added the widget that I used in the package examples that shows key active scheme/theme colors. And I also show the actual color values of some key color attributes. Example 1) Basic Flutter light default color schemeIf we then try the example with using the scheme for case 1: (The Gist was saved with Example 1 as default example) class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Example 1)
// The default Material Design Guide Theme from its color scheme.
ThemeData fromMaterialScheme =
ThemeData.from(colorScheme: ColorScheme.light());
// Example 2)
// A FlexColorScheme based theme from one of its built in color schemes.
ThemeData fromFlexScheme = FlexColorScheme.light(
colors: FlexColor.schemes[FlexScheme.mandyRed].light,
).toTheme;
// Example 3)
// Modified the above scheme and make some customization, keeping
// all other properties as their where. In this case we change
// the theme of the FAB to be primary color based.
ThemeData myModifiedFlexScheme = fromFlexScheme.copyWith(
floatingActionButtonTheme: fromFlexScheme.floatingActionButtonTheme
.copyWith(
backgroundColor: fromFlexScheme.colorScheme.primary,
foregroundColor: fromFlexScheme.colorScheme.onPrimary));
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
// Uncomment the theme you want to try.
theme: fromMaterialScheme, // Example 1
// theme: fromFlexScheme, // Example 2
// theme: myModifiedFlexScheme, // Example 3
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
} We get the expected outcome looking like this: The FAB theme data in Theme is NULL, but it using the Example 2) FlexColorScheme based on mandyRed built-in scheme.Let's just toggle the comments a bit to try example 2: // Uncomment the theme you want to try.
// theme: fromMaterialScheme, // Example 1
theme: fromFlexScheme, // Example 2
// theme: myModifiedFlexScheme, // Example 3 Then we get this, it naturally has the same FAB color is in your example as well: As excepted we can see that the secondary color is used, but it is also applied (unnecessarily in latest Flutter versions) via the Example 3) Modify example 2) to use custom FAB theme.In example 3 we modify the theme data from example 2, to make the FAB use a theme that is based on the active theme's This is one way of making such a modification: // Example 2)
// A FlexColorScheme based theme from one of its built in color schemes.
ThemeData fromFlexScheme = FlexColorScheme.light(
colors: FlexColor.schemes[FlexScheme.mandyRed].light,
).toTheme;
// Example 3)
// Modified the above scheme and make some customization, keeping
// all other properties as their where. In this case we change
// the theme of the FAB to be primary color based.
ThemeData myModifiedFlexScheme = fromFlexScheme.copyWith(
floatingActionButtonTheme: fromFlexScheme.floatingActionButtonTheme
.copyWith(
backgroundColor: fromFlexScheme.colorScheme.primary,
foregroundColor: fromFlexScheme.colorScheme.onPrimary)); Let's use now that theme instead: // Uncomment the theme you want to try.
// theme: fromMaterialScheme, // Example 1
// theme: fromFlexScheme, // Example 2
theme: myModifiedFlexScheme, // Example 3 As expected the result is then: With a FAB that is primary colored, based on its new theme data. Other topicsBuilt-in schemes in FlexColorScheme and their colorsMany of the built in scheme in Easier to use built-in schemes in FlexColorSchemeIt was correctly pointed out to me that just setting up themes to use the built-in color schemes in FlexColorScheme is a bit verbose and cumbersome, with the theme: FlexColorScheme.light(
colors: FlexColor.schemes[FlexScheme.mandyRed].light,
).toTheme;
darkTheme: FlexColorScheme.dark(
colors: FlexColor.schemes[FlexScheme.mandyRed].dark,
).toTheme; I agree, it is cumbersome to to manually get the correct scheme this way via the map, if all you want to do is use an existing built-in scheme. I was mainly focused on building custom scheme and using many of them in my own setups, so the In the very soon to be released version 1.4.0 there is a new theme: FlexColorScheme.light(scheme: FlexScheme.mandyRed).toTheme;
darkTheme: FlexColorScheme.dark(scheme: FlexScheme.mandyRed).toTheme; Old way is of course still supported too and is as before needed when you make custom schemes. FinallyNot sure I any of my above ramblings helped or answered you question. I hope so, if not me know. 😃 BR |
DPT BTW If you want to use the If you in example 2 make this definition, set
You will instead get this result when you use it: where secondary automatically becomes a slightly darker primary that is used by the FAB. This property is documented in the API, but not actually shown in any of the examples. The live version of Flexfold demo app has a toggle where this property in a theme can be changed from 1...4 to use more or less of the pre-defined values in the color schemes to make the resulting theme based on the defined values, or compute missing ones. |
Now I know that there is no length restriction on the issue comment field XD.
btw. I love using FlexColorScheme, and think it earns more exposure, so I hope you don't mind me linking to your project in my github profile. |
@jlnrrg Regarding question 1 regarding how to make a separate While you can do as you show above in point/question 1, it will certainly give a ThemeData object, but with that approach you will get a You can certainly do so, if that is what you prefer, but it is not the recommended way. With the way you show above, FlexColorScheme returns its ColorScheme and you create a ThemeData with This way is shown and used in example 5 as a way to demonstrate differences between default ThemeData.from and what FlexColorScheme.toTheme does. Read more here about why it is not the recommended way. The correct Widget build(BuildContext context) {
ThemeData myThemeData = FlexColorScheme.light(
colors: FlexColor.schemes[FlexScheme.mandyRed].light,
).toTheme;
} Now with release 1.4.0 you can simplify it like this: Widget build(BuildContext context) {
ThemeData myThemeData = FlexColorScheme.light(scheme: FlexScheme.mandyRed).toTheme;
} It does the same thing, just a bit less verbose. The previous way still of course also also work. |
Hey rydmike,
I noticed that a FAB created holds a weird color combination in relation to the upper flex_color_scheme (see attached picture)
FlexScheme definition
I also checked by directly setting the FAB (same result)
FAB definition
In your documentation you have the code entry:
where it not clearly shows, if I should set it myself, or if that is how the FloatingActionButtonTheme is set by the library.
Anyway, I assume that the FloatingActionButtonTheme is null, because ThemeData has no secondary attribute anymore.
The text was updated successfully, but these errors were encountered: