Comment utiliser des chaînes de couleurs hexadécimales dans Flutter?

Question

Comment convertir une chaîne de couleurs hexadécimales comme #b74093 en Color dans Flutter?

Answer 1

Dans le Flottement de l' Color classe accepte uniquement les entiers en paramètres, ou il y a la possibilité d'utiliser le nom des constructeurs fromARGB et fromRGBO.

Donc nous avons seulement besoin de convertir la chaîne de caractères #b74093 à une valeur entière. Nous avons également besoin de respect que l'opacité doit toujours être spécifié.
255 (pleine), l'opacité est représentée par la valeur hexadécimale FF. Déjà, c'est ce qui nous laisse avec 0xFF. Maintenant, nous avons juste besoin de les ajouter à notre chaîne de couleur comme ceci:

const color = const Color(0xffb74093); // Second `const` is optional in assignments.

Les lettres peuvent par choix, être en majuscule ou pas:

const color = const Color(0xFFB74093);

---

En commençant par Dart 2.6.0, vous pouvez créer un extension de la Color de la classe qui vous permet d'utiliser code hexadécimal de la couleur des cordes pour créer un Color objet:

extension HexColor on Color {
  /// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".
  static Color fromHex(String hexString) {
    final buffer = StringBuffer();
    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
    buffer.write(hexString.replaceFirst('#', ''));
    return Color(int.parse(buffer.toString(), radix: 16));
  }

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

L' fromHex méthode pourrait également être déclarée en mixin ou class parce que l' HexColor nom doit être spécifié explicitement dans le but de l'utiliser, mais l'extension est utile pour l' toHex méthode, qui peut être utilisé implicitement. Voici un exemple:

void main() {
  final Color color = HexColor.fromHex('#aabbcc');

  print(color.toHex());
  print(const Color(0xffaabbcc).toHex());
}

Inconvénient de l'utilisation de chaînes de hex

De nombreuses autres réponses ici de montrer comment vous pouvez créer dynamiquement un Color d'une chaîne hexadécimale, comme je l'ai fait ci-dessus. Cependant, cela signifie que la couleur ne peut pas être un const.
Idéalement, vous pouvez assigner vos couleurs, comme je l'ai expliqué dans la première partie de cette réponse, qui est plus efficace lors de l'instanciation des couleurs beaucoup, ce qui est généralement le cas pour les Flottement de widgets.

Answer 2

La classe Color attend un entier ARGB. Puisque vous essayez de l'utiliser avec la valeur RGB , représentez-le comme int et préfixez-le avec 0xff .

 Color mainColor = Color(0xffb74093);
 

---

Si cela vous ennuie et que vous souhaitez toujours utiliser des chaînes, vous pouvez étendre Color et ajouter un constructeur de chaîne

 class HexColor extends Color {
  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF" + hexColor;
    }
    return int.parse(hexColor, radix: 16);
  }

  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}
 

usage

 Color color1 = HexColor("b74093");
Color color2 = HexColor("#b74093");
Color color3 = HexColor("#88b74093"); // if you wish to use ARGB format
 

Answer 3

Remplacez # par 0xff

si votre couleur est # e41749 ce sera 0xffe41749

Exemple

 color : Color(0xffe41749);
 

Answer 4

Pour convertir une chaîne hexadécimale en int, procédez comme suit:

 int hexToInt(String hex)
{
  int val = 0;
  int len = hex.length;
  for (int i = 0; i < len; i++) {
    int hexDigit = hex.codeUnitAt(i);
    if (hexDigit >= 48 && hexDigit <= 57) {
      val += (hexDigit - 48) * (1 << (4 * (len - 1 - i)));
    } else if (hexDigit >= 65 && hexDigit <= 70) {
      // A..F
      val += (hexDigit - 55) * (1 << (4 * (len - 1 - i)));
    } else if (hexDigit >= 97 && hexDigit <= 102) {
      // a..f
      val += (hexDigit - 87) * (1 << (4 * (len - 1 - i)));
    } else {
      throw new FormatException("Invalid hexadecimal value");
    }
  }
  return val;
}
 

Exemple d'appel:

 Color color=new Color(hexToInt("FFB74093"));
 

Answer 5

Il y a une autre solution. Si vous stockez votre couleur sous forme de chaîne hexadécimale normale et que vous ne souhaitez pas lui ajouter d'opacité (FF principal): 1) Convertissez votre chaîne hexadécimale en entier Pour convertir une chaîne hexadécimale en entier, effectuez l'une des opérations suivantes:

 var myInt = int.parse(hexString, radix: 16);
 

ou

 var myInt = int.parse("0x$hexString");
 

comme un préfixe de 0x (ou -0x) fera int.parse par défaut à radix de 16.

2) Ajoutez l'opacité à votre couleur via le code

 Color color = new Color(myInt).withOpacity(1.0);