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 Contain         


        

Answer 1

We have to use a map for it:

If you want to create your own MaterialColor with specific shades you can do something like this by creating own map of color in RGBO(Red, Gree, Blue, Opacity) form:

Map colorMap = {
  50: Color.fromRGBO(147, 205, 72, .1),
  100: Color.fromRGBO(147, 205, 72, .2),
  200: Color.fromRGBO(147, 205, 72, .3),
  300: Color.fromRGBO(147, 205, 72, .4),
  400: Color.fromRGBO(147, 205, 72, .5),
  500: Color.fromRGBO(147, 205, 72, .6),
  600: Color.fromRGBO(147, 205, 72, .7),
  700: Color.fromRGBO(147, 205, 72, .8),
  800: Color.fromRGBO(147, 205, 72, .9),
  900: Color.fromRGBO(147, 205, 72, 1),
};
// Green color code: 93cd48 and first two characters (FF) are alpha values (transparency)
MaterialColor customColor = MaterialColor(0xFF93cd48, colorMap); 

If you have color code value like 93cd48 then for converting it to RGB value use https://www.rapidtables.com/convert/color/hex-to-rgb.html

For more reference: https://medium.com/@jits619/flutter-material-color-conversion-ad1574f25828

https://www.youtube.com/watch?v=U19hRU9e0yw&list=PLQ7fSTYH_bV06SWG1IPnyFbavN5NB_h2o&index=7&t=345s