Come si usano le stringhe di colore esadecimali in Flutter?

Come faccio a convertire una stringa di colore esadecimale come #b74093in Colora Flutter?

In Flutter la Colorclasse accetta solo numeri interi come parametri , oppure esiste la possibilità di usare i costruttori nominati fromARGBe fromRGBO.

Quindi dobbiamo solo convertire la stringa #b74093in un valore intero. Inoltre dobbiamo rispettare quell'opacità deve sempre essere specificata.
255l'opacità (completa) è rappresentata dal valore esadecimale FF. Questo ci lascia già con 0xFF. Ora, dobbiamo solo aggiungere la nostra stringa di colori in questo modo:

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

Le lettere possono essere scelte in maiuscolo o meno:

const color = const Color(0xFFB74093);

A partire da Dart 2.6.0, puoi creare un valoreextension per la Colorclasse che ti consente di utilizzare stringhe di colori esadecimali per creare un Coloroggetto:

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

Il fromHexmetodo potrebbe anche essere dichiarato in a mixino classperché il HexColornome deve essere esplicitamente specificato per poterlo utilizzare, ma l'estensione è utile per il toHexmetodo, che può essere usato implicitamente. Ecco un esempio:

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

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

Svantaggio dell'uso di stringhe esadecimali

Molte delle altre risposte qui mostrano come è possibile creare dinamicamente un Colorda una stringa esadecimale, come ho fatto sopra. Tuttavia, ciò significa che il colore non può essere a const.
Idealmente, assegneresti i tuoi colori come ho spiegato nella prima parte di questa risposta, che è più efficiente quando crei un'istanza molto dei colori, che di solito è il caso dei widget Flutter.

La Colorclasse prevede un numero intero ARGB. Dal momento che si tenta di usarlo con RGBvalore, rappresentarlo come int e prefissarlo con 0xff.

Color mainColor = Color(0xffb74093);

Se sei infastidito da questo e desideri comunque utilizzare le stringhe, puoi estendere Colore aggiungere un costruttore di stringhe

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

uso

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

se si desidera utilizzare un codice esadecimale di colore che è in questo formato n. 123456, allora è molto facile da usare, creare una variabile di tipo Colore e assegnargli i seguenti valori.

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 .

usa myhexcolor e sei pronto per partire.

se si desidera modificare l'opacità del colore direttamente dal codice esadecimale, modificare il valore ff in 0xff sul valore rispettivamente dalla tabella seguente.

Valori di opacità esadecimale

100% - FF

95% - F2

90% - E6

85% - D9

80% - CC

75% - BF

70% - B3

65% - A6

60% - 99

55% - 8 ° C

50% - 80

45% - 73

40% - 66

35% - 59

30% - 4 giorni

25% - 40

20% - 33

15% - 26

10% - 1A

5% - 0D

0% - 00

Per convertire da String esadecimale in int, eseguire:

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

Chiama esempio:

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

Una semplice funzione senza usare una classe:

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

Puoi usarlo in questo modo:

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

Modo semplice :

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

Uso:

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

C'è un'altra soluzione. Se memorizzi il tuo colore come normale stringa esadecimale e non vuoi aggiungere opacità ad esso (FF iniziale): 1) Converti la tua stringa esadecimale in int Per convertire una stringa esadecimale in un numero intero, procedi in uno dei seguenti modi:

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

o

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

come prefisso 0x (o -0x) renderà int.parse predefinito a radix di 16.

2) Aggiungi opacità al tuo colore tramite codice

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

In Flutter crea un colore da RGB con alfa, usa

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

Come usare il colore esadecimale:

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

Esadecimale con opacità:

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

// o modifica il valore "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

Per di più segui il link ufficiale 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));
}

esempio di utilizzo

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

Per riferimento generale. C'è un modo più semplice usando la libreria Supercharged . Sebbene sia possibile utilizzare metodi di estensione con tutte le soluzioni menzionate, è possibile trovare un pratico toolkit della libreria utente.

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

Più facile, vero?

supercharged

"#b74093"? OK...

Alla ricetta esadecimale

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

Importa la nuova classe e usala in questo modo HexToColor('#F2A03D')

Ho perso la risposta ovvia usando numeri esadecimali per il costruttore fromRGB:

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

Puoi fare clic su Widget Colore e ti dice in modo molto più approfondito come stanno queste lettere. Puoi anche usare il metodo Color.fromARGB () per creare colori personalizzati che è molto più facile per me. Utilizzare il sito Web Flutter Doctor Color Picker per scegliere qualsiasi colore desiderato per l'applicazione Flutter .

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

Non so perché questo sia stato abbattuto, questa è stata la soluzione per me.
L'unico modo che non ha richiesto passaggi aggiuntivi

Puoi usare questo pacchetto from_css_color per uscire Colorda una stringa esadecimale. Supporta notazioni esadecimali RGB a tre e sei cifre.

Color color = fromCSSColor('#ff00aa')

Per motivi di ottimizzazione, creare un'istanza di colore una volta per ciascun colore e conservarla da qualche parte per un utilizzo successivo.