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

J'ai un widget que j'aimerai idéalement prendre dans une couleur matérielle de base et sortir un widget sur le thème avec des nuances de cette couleur. Par exemple:Existe-t-il une carte des couleurs de conception de matériaux pour Flutter?

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

exige de moi de spécifier les deux tons de rose. Idéalement, je pouvais 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, 
    ), 
), 
);

est-il un moyen de retourner une « carte » de couleurs des matériaux dans une palette de couleurs, au lieu d'une seule couleur? Quand je regarde la saisie semi-automatique dans IntelliJ, je vois qu'après avoir tapé Colors.pink, je peux spécifier la nuance. Mais si je mets la couleur à une variable, par ex. Color color = Colors.pink, je suis plus tard pas en mesure de faire color.shade100 ou color[100]. Merci!

Source

2017-10-05 Mary

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

Pour obtenir un List de tous les échantillons de couleurs primaires, utilisez Colors.primaries.

Source

2017-10-05 22:24:10

Dois-je définir moi-même carte pour le ColorSwatch, ou est-il un moyen de se référer à la carte MaterialColor? Jusqu'à présent, c'est l'extrait de code que j'ai (excusez-moi pour le formatage), où je dois définir manuellement chaque nuance de la couleur: 'var map = new Carte (); map.putIfAbsent (50,() => Colors.pink [50]); map.putIfAbsent (100,() => Colors.pink [100]); var colorswatch = nouveau ColorSwatch (500, carte); // Couleur de paramétrage ultérieure: // color: colorswatch [50] ' J'ai essayé d'utiliser une couleur de Colors.primaries mais elle renvoie une MaterialColor au lieu d'une Map. – Mary

Je ne sais pas pourquoi vous utilisez un 'Map' ici. Vous pouvez simplement dire 'ColorSwatch color = Colors.pink;' et vous pourrez dire 'color [50]' plus tard. Si vous savez que toutes les nuances sont 'MaterialColor', utilisez' MaterialColor' comme type pour 'color'. –

Ah, j'ai pensé que je devais instancier un nouvel objet ColorSwatch (qui prend dans une carte)! Je n'avais pas réalisé que je pouvais simplement définir un objet ColorSwatch sur une MaterialColor existante. Merci. – Mary

Si vous regardez la documentation Dart au sujet Flutter here

, vous remarquerez que certains des objets MaterialColor sont créés.

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

Si quelqu'un veut encore créer sa propre MaterialColor avec des nuances spécifiques que 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 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 à propos de "hex_value1" .... "hex_value10" doivent être de couleurs différentes. Pour avoir une idée comment sélectionner (créer) ces nuanciers, par exemple jeter un oeil here

Pour ceux qui ne savent pas lire les valeurs des couleurs HEX, ici je posterai quelques informations supplémentaires:

Par exemple, pour obtenir une orange, complètement opaque (0xFFFF9000), vous pouvez utiliser const Color (0xFFFF9000), où:

deux premiers caractères (FF) sont sur l'alpha (transparence),
deux seconds caractères (FF) sont pour le rouge,
troisième deux caractères (90) sont pour le vert,
et deux (00) pour le bleu.

Merci, espérons que cela vous aidera à quelqu'un

Source

2017-12-10 15:43:32 Sniper

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

Répondre

Questions connexes