Wie verwende ich hexadezimale Farbketten in Flutter?

214

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

CreativeCreatorormaybenot
quelle

Antworten:

345

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.

CreativeCreatorormaybenot
quelle
Sie können noch keine statische Methodenerweiterung in dart haben. Github.com/dart-lang/language/issues/723
Łukasz Wiśniewski
1
@ ŁukaszWiśniewski Ja, das kannst du;) Du kannst sie einfach nicht mit der Klasse aufrufen, die erweitert ist ( HexColor.fromHexfunktioniert, funktioniert aber Color.fromHexnicht).
creativecreatorormaybenot
Ich bin nur überrascht, dass Sie 0xFF als Teil eines int
Hamish Johnson
@HamishJohnson gibt 0xnur an, dass die folgenden Ziffern als hexadezimales 🙃 analysiert werden
Creativecreatorormaybenot
134

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
Jossef Harush
quelle
das ist wirklich toll! funktioniert auch mit LinearGradient.
Xhinoda
Die HexColor-Klasse hat bei MaterialColor für mich nicht funktioniert, sie beschwert sich immer wieder über den zweiten Parameter. Bitte helfen Sie hier
leeCoder
19

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

Zakria Khan
quelle
Es ist eine gute Idee, diese Referenz zu speichern, obwohl die .withOpacity (0.2) in den meisten Fällen nützlich genug ist.
Gauris Javier
18

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"));
Rockvole
quelle
18

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");
Alvin Konda
quelle
1
Vielen Dank an @ jeroen-meijer für die Bearbeitung. In der Tat können Sie diesen einen Liner auch verwenden, wenn Sie Lust habenColor(int.parse('#000000'.replaceAll('#', '0xff')))
Alvin Konda
16

Einfacher Weg:

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

Verwendung:

Container(
    color: Color(int.parse(color)),
)
Serdar Polat
quelle
14

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);
Evgeny Kot
quelle
1
Ich brauchte das "führende FF" für Flatters ThemeData.
CreativeCreatorormaybenot
Ich mag diese Lösung wegen ihrer Einfachheit, aber wie @creativecreatorormaybenot erwähnt hat, ist das führende FF immer noch erforderlich.
KevinM
7

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

Amit Prajapati
quelle
5

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,
  )
)
Michael P. Bazos
quelle
5

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

Gauris Javier
quelle
4

"#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;
}
Nahuel Alejandro Cabrera
quelle
4
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')

watchdog0x
quelle
3

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

Color.fromRGBO(0xb7, 0x40, 0x93, 1),
Adam
quelle
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.

EyoelD
quelle
0
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

Rio Weber
quelle
0

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.

Alex Myznikov
quelle