Flutter - come utilizzare i colori esadecimali

In Flutter la classe Color accetta solo numeri interi come parametri, quindi abbiamo solo bisogno di convertire la stringa esadecimale di un colore (es. #E14D26) in un valore intero. Inoltre dobbiamo tenere presente che l'opacità deve sempre essere specificata.

L'opacità 255 (piena) è rappresentata dal valore esadecimale FF. Quindi il nostro valore comincerà con 0xFF. Ora, dobbiamo solo aggiungere la stringa esadecimale del colore in questo modo:

            
const color = const Color(0xFFE14D26);
            
        

Se si desidera utilizzare valori di opacità diversi, è possibile sostituire il primo FF con i valori di questa tabella (funziona anche per gli altri canali di colore).

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

Classe di estensione

A partire da Dart 2.6.0, puoi creare un'estensione per la classe Color che ti consente di utilizzare stringhe di colore esadecimali per creare un oggetto Color:

       
extension HexColor on Color {
    /// La stringa è in formato  "aabbcc" o "ffaabbcc" con un opzionale "#" all'inizio.
    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));
    }
          
    /// MEtte come prefisso il cancelletto se [leadingHashSign] è impostato come `true` (di default è `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 metodo fromHex può anche essere dichiarato in un mixin o in una classe perché il nome HexColor deve essere specificato esplicitamente per usarlo, ma l'estensione è utile per il metodo toHex, che può essere usato implicitamente. Ecco un esempio:

       
void main() {
    final Color color = HexColor.fromHex('#aabbcc');
          
    print(color.toHex());
    print(const Color(0xffaabbcc).toHex());
}