How do I use the different shades of a color swatch in Flutter?

Question

In the default Flutter application code, I tried to change the following code

from:

primarySwatch: Colors.blueGrey

to:

primarySwatch: Colors.blueGrey[500]

but this throws an error:

 ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 4512): The following assertion was thrown building MyApp(dirty):
I/flutter ( 4512): type 'Color' is not a subtype of type 'MaterialColor' of 'primarySwatch' where
I/flutter ( 4512):   Color is from dart:ui
I/flutter ( 4512):   MaterialColor is from package:flutter/src/material/colors.dart
I/flutter ( 4512):   int is from dart:core
I/flutter ( 4512): 
I/flutter ( 4512): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter ( 4512): more information in this error message to help you determine and fix the underlying cause.
I/flutter ( 4512): In either case, please report this assertion by filing a bug on GitHub:
I/flutter ( 4512):   https://github.com/flutter/flutter/issues/new
I/flutter ( 4512): 
I/flutter ( 4512): When the exception was thrown, this was the stack:
I/flutter ( 4512): #0      new ThemeData (package:flutter/src/material/theme_data.dart:78:19)
I/flutter ( 4512): #1      MyApp.build (/data/user/0/com.hackathon.gunbanana/cache/gun_bananaEMVSSI/gun_banana/lib/main.dart:11:18)
I/flutter ( 4512): #2      StatelessElement.build (package:flutter/src/widgets/framework.dart:3678:28)
I/flutter ( 4512): #3      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3625:15)
I/flutter ( 4512): #4      Element.rebuild (package:flutter/src/widgets/framework.dart:3478:5)
I/flutter ( 4512): #5      ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3605:5)
I/flutter ( 4512): #6      ComponentElement.mount (package:flutter/src/widgets/framework.dart:3600:5)
I/flutter ( 4512): #7      Element.inflateWidget (package:flutter/src/widgets/framework.dart:2890:14)
I/flutter ( 4512): #8      Element.updateChild (package:flutter/src/widgets/framework.dart:2693:12)
I/flutter ( 4512): #9      RenderObjectToWidgetElement._rebuild (package:flutter/src/widgets/binding.dart:852:16)
I/flutter ( 4512): #10     RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:823:5)
I/flutter ( 4512): #11     RenderObjectToWidgetAdapter.attachToRenderTree.<anonymous closure> (package:flutter/src/widgets/binding.dart:769:17)
I/flutter ( 4512): #12     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2205:19)
I/flutter ( 4512): #13     RenderObjectToWidgetAdapter.attachToRenderTree (package:flutter/src/widgets/binding.dart:768:13)
I/flutter ( 4512): #14     BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:657:7)
I/flutter ( 4512): #15     runApp (package:flutter/src/widgets/binding.dart:699:7)
I/flutter ( 4512): #16     main (/data/user/0/com.hackathon.gunbanana/cache/gun_bananaEMVSSI/gun_banana/lib/main.dart:3:16)
I/flutter ( 4512): #17     _startIsolate.<anonymous closure> (dart:isolate-patch/dart:isolate/isolate_patch.dart:279)
I/flutter ( 4512): #18     _RawReceivePortImpl._handleMessage (dart:isolate-patch/dart:isolate/isolate_patch.dart:165)
I/flutter ( 4512): ════════════════════════════════════════════════════════════════════════════════════════════════════

How do I use shades?

Solution 1

TLDR

Do

ThemeData(primarySwatch: Colors.lime),

Don't

ThemeData(primarySwatch: Colors.lime.shade700),

---

primarySwatch is not one color. It's all the possible material shades.

If you look into ThemeData's doc it says :

The primary color palette (the [primarySwatch]), chosen from one of the swatches defined by the material design spec. This should be one of the maps from the [Colors] class that do not have "accent" in their name.

This implies that when needed the material component will use primary[500] but may also use other shades !

In fact, primarySwatch is a shortcut to set a bunch of different colors :

• primaryColor
• primaryColorLight/Dark
• accentColor
• ...

But you can override them separatly depending on your needs, with a Color (and not the MaterialColor that primarySwatch requires)

Solution 2

In main.dart file make your custom color outside of MyApp class as below :

Map<int, Color> color = {
50: Color.fromRGBO(255, 92, 87, .1),
100: Color.fromRGBO(255, 92, 87, .2),
200: Color.fromRGBO(255, 92, 87, .3),
300: Color.fromRGBO(255, 92, 87, .4),
400: Color.fromRGBO(255, 92, 87, .5),
500: Color.fromRGBO(255, 92, 87, .6),
600: Color.fromRGBO(255, 92, 87, .7),
700: Color.fromRGBO(255, 92, 87, .8),
800: Color.fromRGBO(255, 92, 87, .9),
900: Color.fromRGBO(255, 92, 87, 1),
};

MaterialColor colorCustom = MaterialColor(0xFFFF5C57, color);

And then just set it to your primarySwatch property inside ThemeData like below

primarySwatch: colorCustom,

Comments

[sud007]

Similar error occurred for me. I was using Colors.black as the swatch color. However as soon as I changed it to Colors.blue it worked. It also worked for some other colors, but not Colors.black. And also, swatch has to be the base color not the varitions of it, because that is what swatches are meant for; generate all variations of a Base color. So whatever base color you provide to a swatch it has to be one of the valid values of MaterialColor else it crashes.

[Gus]

I'm not comfortable with this answer. In my code I've tried theme: new ThemeData( primarySwatch: Colors.lime.shade700, theme: new ThemeData( primarySwatch: Colors.lime[700], and receive the same error messages as OP. Would you be more specific and supply an example?

[Rémi Rousselet]

You need to do primarySwatch: Colors.lime instead of Colors.line.whatever

[Gus]

I found that primarySwatch requires a different format than backgroundColor. So the confusion was on my part. Thanks for your thoughts.

[Vijay Kumar Kanta]

Great answer. I was using my own hex colors wrapped into a color object for all kinds of primary colors, but still was having the swatch property turned on. Now I comment it out, the app works... yippee!!!

[gegobyte]

I think you should include examples on how to use different shades. For example, how many colors should be defined in a swatch and how to actually define it in code.

[Cristiano]

what we supposed to do with the accent color map (A100-A700)?