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?

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