it-swarm.com.de

Wie verwende ich hexadezimale Farbstrings in Flutter?

Wie konvertiere ich eine hexadezimale Farbzeichenfolge wie #b74093 in ein Color in Flutter?

In Flutter akzeptiert die Klasse Color nur Ganzzahlen als Parameter , oder es besteht die Möglichkeit, die genannten Konstruktoren zu verwenden fromARGB und fromRGBO .

Wir müssen also nur den String _#b74093_ in einen ganzzahligen Wert konvertieren. Auch müssen wir berücksichtigen, dass Opazität immer angegeben werden muss.
_255_ (vollständige) Deckkraft wird durch den Hexadezimalwert FF dargestellt. Dies lässt uns bereits mit 0xFF. Jetzt müssen wir nur noch unsere Farbzeichenfolge wie folgt anhängen:

_final color = const Color(0xffb74093);
_

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

_final color = const Color(0xFFB74093);
_

Die Klasse Color erwartet eine ARGB-Ganzzahl. Da Sie versuchen, es mit dem Wert RGB zu verwenden, müssen Sie es als int darstellen und mit dem Präfix 0xff versehen.

Color mainColor = Color(0xffb74093);

Wenn Sie sich darüber ärgern und weiterhin Zeichenfolgen verwenden möchten, können Sie Color erweitern und einen Zeichenfolgenkonstruktor 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));
}

verwendungszweck

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

Gehen Sie wie folgt vor, um einen hexadezimalen String in einen int-String 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;
}

Aufrufbeispiel:

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

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 die Hex-Zeichenfolge in int Führen Sie einen der folgenden Schritte aus, um eine Hex-Zeichenfolge in eine Ganzzahl zu konvertieren:

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 den Radix von 16 gesetzt.

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

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

wenn deine Farbe # e41749 ist, füge einfach davor 0xff hinzu

so kannst du es schreiben als:

farbe: Farbe (0xffe41749);

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

Importiere die neue Klasse und benutze sie so HexToColor('#F2A03D')

3
watchdog0x

"#b74093"? OKAY...

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

In Flutter wird eine Farbe aus RGB mit Alpha erstellt und verwendet

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

So verwenden Sie hex-color:

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 ändern Sie den Wert "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

Für weitere Informationen folgen Sie dem offiziellen Link https://api.flutter.dev/flutter/Dart-ui/Color-class.html

1
Amit Prajapati

Eine einfache Funktion ohne Verwendung einer Klasse:

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

und verwenden

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

const appBackground = Color (0xffdf7599);

df7599 ist der Hex-Code Ihrer Farbe

0
Dcalsky

so ist dein hexadezimaler Wert 052568 => 0xFF + 052568 => 0xFF052568

Das Problem ist, dass Sie eine Deckkraft benötigen, die in das High-Byte der Farbzahl passt. Also müssen wir 0xFF000000 hinzufügen.

0
Oz87

Sie können auf das Farb-Widget klicken, um in viel tieferen Informationen zu erfahren, 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 Website Flutter Doctor Color Picker , um eine beliebige Farbe für Ihre Flatteranwendung auszuwählen.

0
EyoelD