Search code examples
fluttermaterial-designtheming

Set secondary colors in Material Design Theme in Flutter

Where do I set the seconday colors from https://material.io/resources/color/ ?

According to the ThemeData class I have to set the accentColor, which I know how to do: "The [accentColor], sometimes called the secondary color".

After analyzing theme_data.dart you can also set the colorScheme.secondary. But setting a property of ColorScheme means that you have to set all properties. Are you even supposed to set ColorScheme and override it? Also where do I set Secondary Light and Secondary Dark colors? I feel kinda lost as the only way to customize the ThemeData is reading the whole material theming code. Or at least large parts of it. Is there any in depth documentation?

Solution

  • Where do I set the seconday colors from https://material.io/resources/color/ ?

    In general, a good place to do that is in ThemeData which can be passed as a theme argument to MaterialApp.

    But setting a property of ColorScheme means that you have to set all properties

    Not necessarily - unless I misinterpret the question. ColorScheme has a method copyWith() which takes a bunch of named arguments. Therefore, you can reuse existing ColorScheme like so:

    final newScehme = someColorScheme.copyWith(background: ...)

    Of course, the trick is to retrieve that scheme. You can probably get away with retrieving it by accessing ThemeData's colorScheme property:

    Theme.of(context).colorScheme

    Are you even supposed to set ColorScheme and override it?

    I have not seen anything in the documentation that would advise against this, although I did not comb through all of it. I suppose it depends on your use case.

    Also where do I set Secondary Light and Secondary Dark colors?

    I am not particularly well-versed in Material design guidelines and intricacies, but perhaps secondary and secondaryVariant are what you're after?

    Is there any in depth documentation?

    Depends on your definition of in-depth. The following links provide a reasonable overview of various properties related to theming & colors:

    Also note that there is a darkTheme property on MaterialApp which you can use to specify dark theme when it is requested by the system.

    In general, I find that ThemeData has a plethora of customisation options, especially when you combine it with copyWith that's present on many theme-related classes. Whether ThemeData closely matches Material design guidelines I cannot say with any confidence. However, documentation does explain properties rather well, so comparing them to actual guidelines should give one an idea of what's what.