web-dev-qa-db-fra.com

Comment utiliser les chaînes de couleur hexadécimales dans Flutter?

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

colorsdartflutter
77
creativecreatorormaybenot

La classe Color attend un entier ARGB. Puisque vous essayez de l’utiliser avec la valeur RGB, représentez-le en tant qu’int et préfixez-le par 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
71
Jossef Harush

Pour convertir de 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"));
12
Rockvole

Il y a une autre solution. Si vous stockez votre couleur en tant que chaîne hexagonale normale et que vous ne souhaitez pas lui ajouter d'opacité (FF en tête): 1) Convertissez votre chaîne hexagonale en int 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 préfixe 0x (ou -0x), int.parse sera par défaut une base de 16.

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

Color color = new Color(myInt).withOpacity(1.0);
10
Evgeny Kot

si votre couleur est # e41749 ajoutez simplement avant 0xff

afin que vous puissiez l'écrire comme:

couleur: Couleur (0xffe41749);

9
abdallah mohamed
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')

3
watchdog0x

"#b74093"? D'ACCORD...

À 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;
}
2
Nahuel Alejandro Cabrera

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

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

Comment utiliser la couleur hexagonale:

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

Couleur Hex avec opacité:

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

// ou change 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 suivez le lien officiel https://api.flutter.dev/flutter/Dart-ui/Color-class.html

1
Amit Prajapati

Une fonction simple sans utiliser de classe:

Color _getColorFromHex(String hexColor) {
  hexColor = hexColor.replaceAll("#", "");
  return Color(int.parse('FF' + hexColor, radix: 16));
}

et utilise

Color color1 = _getColorFromHex("b74093");
Color color2 = _getColorFromHex("#b74093");
1
Alvin Konda

const appBackground = Couleur (0xffdf7599);

df7599 est le code hexadécimal de votre couleur

0
Dcalsky

comme ça, vous êtes hex est 052568 => 0xFF + 052568 => 0xFF052568

Le problème est que vous avez besoin d'une opacité, qui se situe dans l'octet de poids fort de la couleur. Nous devons donc ajouter 0xFF000000.

0
Oz87

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

0
EyoelD