web-dev-qa-db-fra.com

Existe-t-il une carte des couleurs de conception des matériaux pour Flutter?

J'ai un widget que j'aimerais idéalement prendre dans une couleur de matériau de base et générer un widget sur le thème avec des nuances de cette couleur. Par exemple:

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

exige que je spécifie les deux nuances de rose. Idéalement, je pourrais faire quelque chose comme: 

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

Existe-t-il un moyen de renvoyer une "carte" de couleurs de matériau dans une palette de couleurs, au lieu d'une seule couleur? Lorsque je regarde l'auto-complétion dans IntelliJ, je constate qu'après avoir tapé Colors.pink, je suis en mesure de spécifier la nuance. Mais si je règle la couleur sur une variable, par ex. Color color = Colors.pink, je ne pourrai plus faire color.shade100 ni color[100]. Merci!

colorsmaterial-designflutter
7
Mary

MaterialColor s'étend ColorSwatch qui est un peu comme une Map de couleurs. Vous pouvez utiliser ColorSwatch partout où vous pouvez utiliser une Color et obtenir la teinte 500, mais vous pouvez également y indexer avec [].

Pour obtenir une Listde toutes les nuances de couleur de matériau primaire, utilisez Colors.primaries .

4
Collin Jackson

Si vous consultez la documentation de Dart sur Flutter ici

vous remarquerez comment certains objets MaterialColor sont créés. 

Évidemment, Flutter a une très bonne conception du MaterialDesign et la plupart des couleurs décrites ici sont déjà prédéfinies dans le paquet principal "paquet: flutter/material.Dart". Tout cela va être disponible pour être utilisé hors de la boîte, mais

Si quelqu'un veut toujours créer son propre MaterialColor avec des nuances spécifiques, vous pouvez faire quelque chose comme ceci:

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)});

Le premier paramètre du constructeur d'objet MaterialColor est la valeur HEX par défaut de votre couleur, dans ce cas 0xFFAAD400. Le deuxième paramètre est une carte avec toutes les nuances de votre couleur. Toutes les valeurs concernant "hex_value1" .... "hex_value10" doivent être de couleurs différentes. Pour avoir une idée de la façon de sélectionner (créer) ces nuances, par exemple, jetez un oeil ici

Pour ceux qui ne savent pas lire les valeurs de couleurs HEX, je vais poster quelques informations supplémentaires:

Par exemple, pour obtenir un orange totalement opaque (0xFFFF9000), vous pouvez utiliser Const Color (0xFFFF9000), où:

  • les deux premiers caractères (FF) concernent l'alpha (transparence), 

  • les deux autres caractères (FF) sont pour le rouge,

  • troisièmes deux caractères (90) sont pour le vert,

  • et les deux derniers (00) pour le bleu.

Merci, j'espère que ça va aider quelqu'un

10
Sniper

Vous pouvez créer votre couleur de matériau comme ceci: 

const MaterialColor primaryColorShades = MaterialColor(
  0xFF181861,
  <int, Color>{
    50: Color(0xFFA4A4BF),
    100: Color(0xFFA4A4BF),
    200: Color(0xFFA4A4BF),
    300: Color(0xFF9191B3),
    400: Color(0xFF7F7FA6),
    500: Color(0xFF181861),
    600: Color(0xFF6D6D99),
    700: Color(0xFF5B5B8D),
    800: Color(0xFF494980),
    900: Color(0xFF181861),
  },
);
1
Andrés Sanabria