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

Comment puis-je convertir une chaîne de couleur hexadécimal comme #b74093un Colorflutter?

Dans Flutter, la Colorclasse accepte uniquement les entiers comme paramètres , ou il y a la possibilité d'utiliser les constructeurs nommés fromARGBet fromRGBO.

Il nous suffit donc de convertir la chaîne #b74093en une valeur entière. Nous devons également respecter le fait que l' opacité doit toujours être spécifiée.
255l'opacité (complète) est représentée par la valeur hexadécimale FF. Cela nous laisse déjà avec 0xFF. Maintenant, nous avons juste besoin d'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 non:

const color = const Color(0xFFB74093);

À partir de Dart 2.6.0, vous pouvez créer unextension pour la Colorclasse qui vous permet d'utiliser des chaînes de couleurs hexadécimales pour créer un Colorobjet:

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).padLeft(2, '0')}'
      '${red.toRadixString(16).padLeft(2, '0')}'
      '${green.toRadixString(16).padLeft(2, '0')}'
      '${blue.toRadixString(16).padLeft(2, '0')}';
}

La fromHexméthode peut également être déclarée dans un mixinou classparce que le HexColornom doit être explicitement spécifié pour l'utiliser, mais l'extension est utile pour la toHexméthode, qui peut être utilisée implicitement. Voici un exemple:

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

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

Inconvénient d'utiliser des chaînes hexadécimales

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

La Colorclasse attend un entier ARGB. Puisque vous essayez de l'utiliser avec RGBvalue, 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 Coloret 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

si vous souhaitez utiliser le code hexadécimal de couleur qui est dans ce format # 123456 alors il est très facile à utiliser, créez des variables A de type Couleur et affectez-lui les valeurs suivantes.

Color myHexColor = Color(0xff123456) 

// her you notice I use the 0xff and that is opacity or transparency of the color 
// and you can also change these value .

utilisez myhexcolor et vous êtes prêt à partir.

si vous souhaitez modifier l'opacité de la couleur directement à partir du code hexadécimal, remplacez la valeur ff dans 0xff par la valeur respective du tableau ci-dessous.

Valeurs d'opacité hexadécimale

100% - FF

95% - F2

90% - E6

85% - D9

80% - CC

75% - BF

70% - B3

65% - A6

60% - 99

55% - 8C

50% - 80

45% - 73

40% - 66

35% - 59

30% - 4D

25% - 40

20% - 33

15% - 26

10% - 1A

5% - 0D

0% - 00

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

Une fonction simple sans utiliser de classe:

Color _colorFromHex(String hexColor) {
  final hexCode = hexColor.replaceAll('#', '');
  return Color(int.parse('FF$hexCode', radix: 16));
}

Vous pouvez l'utiliser comme ceci:

Color color1 = _colorFromHex("b74093");
Color color2 = _colorFromHex("#b74093");

Moyen facile :

String color = yourHexColor.replaceAll('#', '0xff');

Usage:

Container(
    color: Color(int.parse(color)),
)

Il y a une autre solution. Si vous stockez votre couleur en tant que 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 par défaut int.parse à radix de 16.

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

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

Dans Flutter, il crée une couleur à partir de RVB avec alpha, utilisez

return new Container(
  color: new Color.fromRGBO(0, 0, 0, 0.5),
);

Comment utiliser la couleur hexadécimale:

return new Container(
  color: new Color(0xFF4286f4),
);
//0xFF -> the opacity (FF for opaque)
//4286f4 -> the hex-color

Couleur hexagonale avec opacité:

return new Container(
  color: new Color(0xFF4286f4).withOpacity(0.5),
);

// ou modifiez la valeur "FF"

100% — FF
 95% — F2
 90% — E6
 85% — D9
 80% — CC
 75% — BF
 70% — B3
 65% — A6
 60% — 99
 55% — 8C
 50% — 80
 45% — 73
 40% — 66
 35% — 59
 30% — 4D
 25% — 40
 20% — 33
 15% — 26
 10% — 1A
 5% — 0D
 0% — 00

Pour plus d'informations, suivez le lien officiel https://api.flutter.dev/flutter/dart-ui/Color-class.html

utils.dart

///
/// Convert a color hex-string to a Color object.
///
Color getColorFromHex(String hexColor) {
  hexColor = hexColor.toUpperCase().replaceAll('#', '');

  if (hexColor.length == 6) {
    hexColor = 'FF' + hexColor;
  }

  return Color(int.parse(hexColor, radix: 16));
}

exemple d'utilisation

Text(
  'hello world',
  style: TextStyle(
    color: getColorFromHex('#aabbcc'),
    fontWeight: FontWeight.bold,
  )
)

Pour référence générale. Il existe un moyen plus simple d'utiliser la bibliothèque Supercharged . Bien que vous puissiez utiliser des méthodes d'extension avec toutes les solutions mentionnées, vous trouverez une boîte à outils de bibliothèque utilisateur pratique.

"#ff00ff".toColor(); // painless hex to color
"red".toColor(); // supports all web color names

Plus simple, non?

Suralimenté

"#b74093"? D'ACCORD...

Vers la recette HEX

int getColorHexFromStr(String colorStr)
{
  colorStr = "FF" + colorStr;
  colorStr = colorStr.replaceAll("#", "");
  int val = 0;
  int len = colorStr.length;
  for (int i = 0; i < len; i++) {
    int hexDigit = colorStr.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("An error occurred when converting a color");
    }
  }
  return val;
}

import 'package:flutter/material.dart';
class HexToColor extends Color{
  static _hexToColor(String code) {
    return int.parse(code.substring(1, 7), radix: 16) + 0xFF000000;
  }
  HexToColor(final String code) : super(_hexToColor(code));
}

Importez la nouvelle classe et utilisez-la comme ceci HexToColor('#F2A03D')

J'ai raté la réponse évidente en utilisant des nombres hexadécimaux pour le constructeur fromRGB:

Color.fromRGBO(0xb7, 0x40, 0x93, 1),

Vous pouvez cliquer sur Color Widget et il vous indique de manière plus approfondie comment ces lettres représentent. Vous pouvez également utiliser la méthode Color.fromARGB () pour créer des couleurs personnalisées, ce qui m'est beaucoup plus facile. Utilisez le site Web Flutter Doctor Color Picker pour choisir la couleur de votre choix pour votre application de flottement.

String hexString = "45a3df";
Color(int.parse("0xff${hexString}"));

Je ne sais pas pourquoi cela est abattu, c'était la solution pour moi.
Seul moyen qui n'a pas nécessité d'étapes supplémentaires

Vous pouvez utiliser ce package from_css_color pour Colorsortir d'une chaîne hexadécimale. Il prend en charge la notation hexadécimale RVB à trois et six chiffres.

Color color = fromCSSColor('#ff00aa')

Pour des raisons d'optimisation, créez une instance Color une fois pour chaque couleur et stockez-la quelque part pour une utilisation ultérieure.