9

i would like to insert an hexadecimal color code in the primarySwatch property, here is what i have tried to do :

           return MaterialApp(
             title: 'Login Demo',
             theme: ThemeData(
              // brightness: Brightness.dark,
               primarySwatch: Color(0xFF3399FF),
1

3 Answers 3

18

This tutorial shows a function that can build primarySwatches from a Color.

MaterialColor buildMaterialColor(Color color) {
  List strengths = <double>[.05];
  Map<int, Color> swatch = {};
  final int r = color.red, g = color.green, b = color.blue;

  for (int i = 1; i < 10; i++) {
    strengths.add(0.1 * i);
  }
  strengths.forEach((strength) {
    final double ds = 0.5 - strength;
    swatch[(strength * 1000).round()] = Color.fromRGBO(
      r + ((ds < 0 ? r : (255 - r)) * ds).round(),
      g + ((ds < 0 ? g : (255 - g)) * ds).round(),
      b + ((ds < 0 ? b : (255 - b)) * ds).round(),
      1,
    );
  });
  return MaterialColor(color.value, swatch);
}

Then in the theme you can do:

      primarySwatch: buildMaterialColor(Color(0xFF3399FF)),
Sign up to request clarification or add additional context in comments.

1 Comment

in case anyone get Error: The argument type 'Map<dynamic, dynamic>' can't be assigned to the parameter type 'Map<int, Color>', try to change the line: Map swatch = <int, Color>{}; to: Map<int, Color> swatch = {};
1

You can set primarySwatch property like below.

Map<int, Color> color =
{
50:Color.fromRGBO(51, 153, 255, .1),
100:Color.fromRGBO(51, 153, 255, .2),
200:Color.fromRGBO(51, 153, 255, .3),
300:Color.fromRGBO(51, 153, 255, .4),
400:Color.fromRGBO(51, 153, 255, .5),
500:Color.fromRGBO(51, 153, 255, .6),
600:Color.fromRGBO(51, 153, 255, .7),
700:Color.fromRGBO(51, 153, 255, .8),
800:Color.fromRGBO(51, 153, 255, .9),
900:Color.fromRGBO(51, 153, 255, 1),
};
...
primarySwatch: MaterialColor(0xFF3399FF, color)

2 Comments

i got an error, i would like to use one color, but it seems in your example you are merge alla these colors with mine or what?
Do you type '...' characters? Anyway it is similar you selected answer. '51, 153, 255' is RGB values what you want(0xFF3399FF).
1

MaterialColor requires shades. So you need a function like:

MaterialColor getMaterialColor() {
  int colorValue = 0xFFC9F5FC;
  Color color = Color(colorValue);
  Map<int, Color> shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
      .asMap()
      .map((key, value) => MapEntry(value, color.withOpacity(1 - (1 - (key + 1) / 10))));

  return MaterialColor(colorValue, shades);
}

or you can use it as extension like:

extension ToMaterialColor on Color {
  MaterialColor get asMaterialColor {
    Map<int, Color> shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
        .asMap()
        .map((key, value) => MapEntry(value, withOpacity(1 - (1 - (key + 1) / 10))));

    return MaterialColor(value, shades);
  }
}
...
primarySwatch: Color(0xFFC9F5FC).asMaterialColor

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.