how to assign hexadecimal color code in primarySwatch in flutter?

Question

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),

PrimarySwatch is not a Color, but a MaterialColor, a class with a primary color and a Map of shades. api.flutter.dev/flutter/material/MaterialColor-class.html — EdwynZN
– EdwynZN, Commented Jun 17, 2020 at 15:17

Giles Correia Morton · Accepted Answer · 2022-03-11 12:53:02Z

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)),

edited Mar 11, 2022 at 12:53

answered Jun 17, 2020 at 15:57

Giles Correia Morton

8726 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ib_ganz Over a year ago

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 = {};

KuKu · Accepted Answer · 2020-06-17 15:19:59Z

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)

answered Jun 17, 2020 at 15:19

KuKu

7,6101 gold badge16 silver badges28 bronze badges

2 Comments

Ramses Kouam Over a year ago

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?

KuKu Over a year ago

Do you type '...' characters? Anyway it is similar you selected answer. '51, 153, 255' is RGB values what you want(0xFF3399FF).

fmdogan · Accepted Answer · 2022-12-20 10:57:01Z

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

Collectives™ on Stack Overflow

how to assign hexadecimal color code in primarySwatch in flutter?

3 Answers 3

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Related