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

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)

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,