14
votes

Flutter convertir la couleur en chaîne hexadécimale

Comment puis-je convertir une instance de classe Flutter Color en une chaîne hexadécimale?

Par exemple, je voudrais convertir Colors.blue en ce que serait '#4286f4' .

Usecase permet à l'utilisateur de choisir une couleur et de l'enregistrer dans la base de données en tant que couleur hexadécimale.

J'ai vérifié les questions connexes et elles sont destinées à être converties dans l'autre sens.

flutter dart

1 commentaires

Pour obtenir le code couleur "HTML" sans opacité, utilisez #${Colors.blue.value.toRadixString(16).substring(2)}

3 Réponses :

28
votes

Vous pouvez convertir la propriété value (comprend alpha) ou les propriétés individuelles red , green et blue en hexadécimal en utilisant int.toRadixString(16) :

 var myColor = Colors.blue;
 var hex = '#${myColor.value.toRadixString(16)}';

4 commentaires

Merci Gunter! Seulement manqué la soustraction des 2 premiers caractères pour avoir la bonne couleur hexadécimale CSS. String hexString = '#' + color.value.toRadixString(16).substring(2, hexString.length);

Ou bien combinez # avec les valeurs hexadécimales des composants de couleur rouge, vert et bleu (mais pas alpha) au lieu de la value .

Le code ci-dessus ne parvient pas à produire le format correct lorsque le rouge est 0. Par exemple, 0x00ACC1 sera converti en #acc1 . Vous devez utiliser '#${intColor.toRadixString(16).padLeft(6, '0')}'

De plus, si vous voulez toujours omettre alpha, faites d'abord intColor = 0xFFFFFF & intColor .

3
votes

Vous pouvez ajouter une extension à la classe Color pour obtenir directement HexString à partir de l'objet Color lui-même.

Color color = Colors.blue ; 
print(color.toHex());

extension HexColor on Color {
  /// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
  String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
      '${alpha.toRadixString(16).padLeft(2, '0')}'
      '${red.toRadixString(16).padLeft(2, '0')}'
      '${green.toRadixString(16).padLeft(2, '0')}'
      '${blue.toRadixString(16).padLeft(2, '0')}';
}

0 commentaires

3
votes

Voici ce que j'utilise:

extension ColorX on Color {
  String toHexTriplet() => '#${(value & 0xFFFFFF).toRadixString(16).padLeft(6, '0').toUpperCase()}';
}

Exemples de sorties: #00FFFF ou #FF69B4

Ce code s'assure également que l'alpha est omis ( commentaire de @ bakua )

Un peu d'inspiration du code source Flutter: util.dart , painting.dart

0 commentaires