Wie verwende ich hexadezimale Farbketten in Flutter?

Wie konvertiere ich eine hexadezimale Farbzeichenfolge wie #b74093in eine Colorin Flutter?

In Flutter akzeptiert die ColorKlasse nur Ganzzahlen als Parameter , oder es besteht die Möglichkeit, die genannten Konstruktoren fromARGBund zu verwenden fromRGBO.

Wir müssen also nur die Zeichenfolge #b74093in einen ganzzahligen Wert konvertieren . Wir müssen auch respektieren, dass die Deckkraft immer spezifiziert werden muss.
255Die (volle) Deckkraft wird durch den Hexadezimalwert dargestellt FF. Das lässt uns schon mit 0xFF. Jetzt müssen wir nur noch unsere Farbzeichenfolge wie folgt anhängen:

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

Die Buchstaben können wahlweise groß geschrieben werden oder nicht:

const color = const Color(0xFFB74093);

Beginnend mit Dart 2.6.0können Sie eineextension für die ColorKlasse erstellen , mit der Sie hexadezimale Farbzeichenfolgen verwenden können, um ein ColorObjekt zu erstellen :

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')}';
}

Die fromHexMethode könnte auch in a deklariert werden mixinoder classweil der HexColorName explizit angegeben werden muss, um sie zu verwenden, aber die Erweiterung ist nützlich für die toHexMethode, die implizit verwendet werden kann. Hier ist ein Beispiel:

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

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

Nachteil der Verwendung von Hex-Strings

Viele der anderen Antworten hier zeigen, wie Sie Coloraus einer Hex-Zeichenfolge dynamisch eine erstellen können , wie ich es oben getan habe. Dies bedeutet jedoch, dass die Farbe nicht a sein kann const.
Im Idealfall würden Sie Ihre Farben so zuweisen, wie ich es im ersten Teil dieser Antwort erklärt habe. Dies ist effizienter, wenn Sie häufig Farben instanziieren, was normalerweise bei Flutter-Widgets der Fall ist.

Die ColorKlasse erwartet eine ARGB-Ganzzahl. Da Sie versuchen, es mit RGBvalue zu verwenden, stellen Sie es als int dar und stellen Sie ihm ein Präfix voran 0xff.

Color mainColor = Color(0xffb74093);

Wenn Sie sich darüber ärgern und dennoch Zeichenfolgen verwenden möchten, können ColorSie einen Zeichenfolgenkonstruktor erweitern und hinzufügen

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

Verwendung

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

Wenn Sie einen hexadezimalen Farbcode in diesem Format # 123456 verwenden möchten, können Sie ihn ganz einfach verwenden. Erstellen Sie eine A-Variable vom Typ Farbe und weisen Sie ihr die folgenden Werte zu.

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 .

benutze myhexcolor und du bist bereit zu gehen.

Wenn Sie die Deckkraft der Farbe direkt aus dem Hex-Code ändern möchten, ändern Sie den ff-Wert in 0xff in den entsprechenden Wert aus der folgenden Tabelle.

Hex-Opazitätswerte

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

Gehen Sie folgendermaßen vor, um von einem hexadezimalen String in einen int zu konvertieren:

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;
}

Beispiel aufrufen:

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

Eine einfache Funktion ohne Verwendung einer Klasse:

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

Sie können es so verwenden:

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

Einfacher Weg:

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

Verwendung:

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

Es gibt eine andere Lösung. Wenn Sie Ihre Farbe als normale Hex-Zeichenfolge speichern und keine Deckkraft hinzufügen möchten (führendes FF): 1) Konvertieren Sie Ihre Hex-Zeichenfolge in int Um eine Hex-Zeichenfolge in eine Ganzzahl zu konvertieren, führen Sie einen der folgenden Schritte aus:

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

oder

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

Als Präfix von 0x (oder -0x) wird int.parse standardmäßig auf radix von 16 gesetzt.

2) Fügen Sie Ihrer Farbe über Code Deckkraft hinzu

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

In Flutter wird eine Farbe aus RGB mit Alpha erstellt

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

So verwenden Sie Hex-Farbe:

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

Hex-Farbe mit Deckkraft:

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

// oder ändere den "FF" Wert

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

Für weitere Informationen folgen Sie dem offiziellen Link 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));
}

Beispiel Verwendung

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

Als allgemeine Referenz. Es gibt eine einfachere Möglichkeit, die Bibliothek Supercharged zu verwenden . Obwohl Sie mit allen genannten Lösungen Erweiterungsmethoden verwenden können, finden Sie ein praktisches Toolkit für die Benutzerbibliothek.

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

Einfacher, oder?

Aufgeladen

"#b74093"? OK...

Zum HEX-Rezept

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

Importieren Sie die neue Klasse und verwenden Sie sie so HexToColor('#F2A03D')

Ich habe die offensichtliche Antwort mit Hex-Zahlen für den fromRGB-Konstruktor verpasst:

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

Sie können auf das Farb-Widget klicken und erfahren ausführlicher, wofür diese Buchstaben stehen. Sie können auch die Color.fromARGB () -Methode verwenden, um benutzerdefinierte Farben zu erstellen, was für mich viel einfacher ist. Verwenden Sie die Flutter Doctor Color Picker- Website, um eine beliebige Farbe für Ihre Flatteranwendung auszuwählen.

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

Ich weiß nicht, warum das niedergeschlagen wird, das war die Lösung für mich.
Nur so waren keine zusätzlichen Schritte erforderlich

Sie können dieses Paket from_css_color verwenden , um Coloraus einer Hex-Zeichenfolge herauszukommen. Es unterstützt sowohl die drei- als auch die sechsstellige RGB-Hex-Notation.

Color color = fromCSSColor('#ff00aa')

Erstellen Sie zur Optimierung einmal eine Farbinstanz für jede Farbe und speichern Sie sie zur späteren Verwendung an einem anderen Ort.