Is there a map of Material design colors for Flutter?

Question

I have a widget that I'd ideally like to take in a base Material color and output a widget themed with shades of that color. For example:

return new Container(
  color: Colors.pink.shade50,
  child: new Text(
    'hello',
    style: new TextStyle(
      color: Colors.pink.shade100,
    ),
  ),
);

requires me to specify both shades of pink. Ideally, I could do something like:

Color color = getBaseColorForThisPage(); // returns something like Colors.pink, but on another page, it'll return something like Colors.purple
return new Container(
  color: color.shade50,
  child: new Text(
    'hello',
    style: new TextStyle(
      color: color.shade100,
    ),
  ),
);

Is there a way to return a "map" of Material colors within a color palette, instead of just a single color? When I look at the autocomplete in IntelliJ, I see that after typing Colors.pink, I'm able to specify the shade. But if I set the color to a variable, e.g. Color color = Colors.pink, I am later not able to do color.shade100 or color[100]. Thanks!

Answer 1

MaterialColor extends ColorSwatch which is kind of like a Map of colors. You can use ColorSwatch anywhere you could use a Color and get the 500 shade, but you can also index into it with [].

To get a List of all the primary material color swatches, use Colors.primaries.