Comments (4)
Hi @jinfagang, thank for you question and you are totally correct and it is actually by design that many options in sub themes are left out.
That does not mean you cannot use them and add them, you totally can.
FlexThemeData.light
and FlexColorScheme.light().toTheme
and their dark variants, just returns standard ThemeData
object so you can add any additional custom sub theming you want to do, with ThemeData
's normal copy with method, like this for example:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: FlexThemeData.light(scheme: FlexScheme.mandyRed).copyWith(
appBarTheme: const AppBarTheme(shadowColor: Color(0xFFFFFFFF)));
),
themeMode: ThemeMode.light,
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
FlexColorScheme takes care of many parts that are tricky or tedious to do in Flutter's theming. Adding direct built in support for properties that work well and are easy to adjust for single sub-themes, is not the goal or scope, since they work well and are easy to use as they are in the framework.
Hope this helps. 😃
BR Mike
from flex_color_scheme.
Actually I just realized, it is a bit trickier than that.
For the sub themes that FlexColorScheme creates already, and even already version 3 does that for AppBar, as a part of the core tweaks that it does to them. You would of course first first have to obtain a copy of the AppBar
theme it has already created, and then apply your changes to this AppBar theme, in order to not loose the features FlexColorScheme already did to it.
Here is an updated example, that should produce a result that combines FlexColorScheme's already added AppBar theming and the desired shadow color.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final ThemeData lightTheme = FlexThemeData.light(scheme: FlexScheme.mandyRed);
return MaterialApp(
title: 'Flutter Demo',
theme: lightTheme.copyWith(appBarTheme: lightTheme.appBarTheme.copyWith(
shadowColor: const Color(0xFFFFFFFF));
themeMode: ThemeMode.light,
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
I should explain this with a few examples in the documentation too. Could be helpful to others as well. It is of course just standard Flutter and Dart class usage logic, but it might not be so obvious. It certainly would not have been obvious to me when I started with Flutter.
BR Mike
from flex_color_scheme.
@rydmike thank u very much, that's helpful.
So that I can using Flex default theme as well as custom some shadow colors.
BTW, Can I just using a theme like: FlexScheme.mandyRed and meanwhile change the only primary color? (with all Flex default color)
from flex_color_scheme.
Hi again @jinfagang and no problem :),
Yes you can indeed override any color in the built-in color schemes.
If I also keep the custom shadow from previous example, in the examples below it would look like this:
Prior to version 4, in version 3 and 2, it was a bit more tricky, you would need to do this:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final ThemeData lightTheme = FlexColorScheme.light(
colors: FlexColor.schemes[FlexScheme.mandyRed]!.light.copyWith(primary: const Color(0xFFE5334D)),
).toTheme;
return MaterialApp(
title: 'Flutter Demo',
theme: lightTheme.copyWith(appBarTheme: lightTheme.appBarTheme.copyWith(
shadowColor: const Color(0xFFFFFFFF), // <= Just add the color prop for it.
);
themeMode: ThemeMode.light,
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
While that worked and still works, it was a bit cumbersome. So in version 4 I made it simpler.
The FlexColorScheme
class and its ThemeData
extension, FlexThemeData
now have all color scheme, Color
properties also available as direct properties in the 'light' and 'dark' constructors. So now you can just do this:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final ThemeData lightTheme = FlexThemeData.light(
scheme: FlexScheme.mandyRed,
primary: const Color(0xFFE5334D),
);
return MaterialApp(
title: 'Flutter Demo',
theme: lightTheme.copyWith(appBarTheme: lightTheme.appBarTheme.copyWith(
shadowColor: const Color(0xFFFFFFFF));
themeMode: ThemeMode.light,
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
Any color value you add in the constructor property directly, will override the values that are set either via the scheme
or colors
properties. If nothing is set in scheme
or colors
, it uses defaults from the the standard Material 2 guide example FlexScheme.material
scheme to fill in blanks.
To learn about all features in FlexColorScheme V4 the practical hands on way, I recommend playing with the new default example in the repo. I called it the developers "Hot Reload Playground":
https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/main.dart
It has pretty much all features in a pre-configured template with the extensive comments on what each thing does.
BTW you question about overriding the default sub-themes and the need for that extra copy of the ThemeData, got me to think that I might be able to in a later update make that simpler to via a deep copyWith. It would do the extra copy of "this" subtheme first and then add then props from the one added to it. maybe just call it "merge" like the SDK does with the TextTheme. I would actually be a nice feature to have in the Flutter SDK itself on ThemeData. I might propose that too, but seeing that land in Flutter would take anywhere from 4...6 months to maybe even a year.
Anyway closing this issue for now as "solved". If you have more question don't hesitate to ask. :)
BR Mike
from flex_color_scheme.
Related Issues (20)
- Images are not loading properly. ( Working fine when using VPN ) HOT 2
- No android navigation bar in themes playground simulator when running in web platform HOT 1
- [TimePicker] Clock is not filled with color HOT 2
- Better organization of enabled and disabled chips and rename elevated chips. HOT 3
- How to use native themeData when using flex_color_scheme HOT 1
- Dense dropdownMenuTheme is not working HOT 15
- When setting up InputDecoration contentPadding, you must set isDense or it won't work HOT 3
- material 3 app bar color HOT 18
- AppBar color issue when using seed generated scheme with key color locked
- Playground: FAB fabSchemeColor code for value SchemeColor.secondary is not generated.
- How to change the theme color through the button HOT 2
- Provides copywith for FlexScheme HOT 2
- Provides parameters to make the android status bar transparent HOT 1
- Can't copy all theme values from themeColors in themesplayground? This was possible before, and it worked HOT 4
- Add enhanced enum functions to `FlexScheme` to get its associated data and colors
- Building on M1 causes error HOT 2
- How to set status bar icon black ? HOT 2
- Define card shape in FCS? HOT 2
- Error: Type argument 'double' doesn't conform to the bound 'Enum?' of the type variable 'T' on 'EnumProperty'. HOT 4
- How to set a new scaffold background color with opacity HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flex_color_scheme.