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

If you take a look the Dart documentation about Flutter here

you will notice how some of the MaterialColor objects are created.

Obviously Flutter has really good conception about the MaterialDesign and most of the colours described here are already predefined inside the main flutter package "package:flutter/material.dart". All this is going to be available to be used out of the box, but

If somebody still wants to create his own MaterialColor with specific shades you can do something like this:

MaterialColor myGreen = const MaterialColor(0xFFAAD400,
  const {
    50 : const Color(hex_value1),
    100 : const Color(hex_value2),
    200 : const Color(hex_value3),
    300 : const Color(hex_value4),
    400 : const Color(hex_value5),
    500 : const Color(hex_value6),
    600 : const Color(hex_value7),
    700 : const Color(hex_value8),
    800 : const Color(hex_value9),
    900 : const Color(hex_value10)});

The first parameter in MaterialColor object constructor is the default HEX value of your colour, in this case 0xFFAAD400. The second parameter is a Map with all swatches of your colour. All values about "hex_value1" .... "hex_value10" need to be different colours. To get some idea how to select (create) these swatches, for example take a look here

For those who don't know how to read the colours HEX values, here I will post some additional information:

For example, to get a fully opaque orange (0xFFFF9000), you could use const Color(0xFFFF9000), where:

• first two characters (FF) are about the alpha (transparency),

• second two characters (FF) are for the red,

• third two characters (90) are for the green,

• and last two (00) for the blue.

Thanks, Hope it will help to somebody