Custom AppBarTheme options - (How to add custom component theme properties not included in FlexColorScheme)

[lucasjinreal]

currently shadowcolor can not set.

[rydmike]

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

[rydmike]

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(0xFF2D0606))),
      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

[lucasjinreal]

@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)

[rydmike]

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" sub-theme 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