Comment puis-je convertir une chaîne de couleur hexadécimal comme #b74093
un Color
flutter?
Dans Flutter, la Color
classe accepte uniquement les entiers comme paramètres , ou il y a la possibilité d'utiliser les constructeurs nommés fromARGB
et fromRGBO
.
Il nous suffit donc de convertir la chaîne #b74093
en une valeur entière. Nous devons également respecter le fait que l' opacité doit toujours être spécifiée.
255
l'opacité (complète) est représentée par la valeur hexadécimale FF
. Cela nous laisse déjà avec 0xFF
. Maintenant, nous avons juste besoin d'ajouter notre chaîne de couleur comme ceci:
const color = const Color(0xffb74093); // Second `const` is optional in assignments.
Les lettres peuvent par choix être en majuscule ou non:
const color = const Color(0xFFB74093);
À partir de Dart 2.6.0
, vous pouvez créer unextension
pour la Color
classe qui vous permet d'utiliser des chaînes de couleurs hexadécimales pour créer un Color
objet:
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')}';
}
La fromHex
méthode peut également être déclarée dans un mixin
ou class
parce que le HexColor
nom doit être explicitement spécifié pour l'utiliser, mais l'extension est utile pour la toHex
méthode, qui peut être utilisée implicitement. Voici un exemple:
void main() {
final Color color = HexColor.fromHex('#aabbcc');
print(color.toHex());
print(const Color(0xffaabbcc).toHex());
}
Beaucoup d'autres réponses ici montrent comment vous pouvez créer dynamiquement un à Color
partir d'une chaîne hexadécimale, comme je l'ai fait ci-dessus. Cependant, cela signifie que la couleur ne peut pas être a const
.
Idéalement, vous attribueriez vos couleurs comme je l'ai expliqué dans la première partie de cette réponse, ce qui est plus efficace pour instancier beaucoup de couleurs, ce qui est généralement le cas pour les widgets Flutter.
HexColor.fromHex
fonctionne maisColor.fromHex
ne fonctionne pas).0x
indique simplement que les chiffres suivants seront analysés comme un hexadécimal 🙃La
Color
classe attend un entier ARGB. Puisque vous essayez de l'utiliser avecRGB
value, représentez-le comme int et préfixez-le avec0xff
.Si cela vous ennuie et que vous souhaitez toujours utiliser des chaînes, vous pouvez étendre
Color
et ajouter un constructeur de chaîneusage
la source
si vous souhaitez utiliser le code hexadécimal de couleur qui est dans ce format # 123456 alors il est très facile à utiliser, créez des variables A de type Couleur et affectez-lui les valeurs suivantes.
utilisez myhexcolor et vous êtes prêt à partir.
si vous souhaitez modifier l'opacité de la couleur directement à partir du code hexadécimal, remplacez la valeur ff dans 0xff par la valeur respective du tableau ci-dessous.
Valeurs d'opacité hexadécimale
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
la source
Pour convertir une chaîne hexadécimale en int, procédez comme suit:
Exemple d'appel:
la source
Une fonction simple sans utiliser de classe:
Vous pouvez l'utiliser comme ceci:
la source
Color(int.parse('#000000'.replaceAll('#', '0xff')))
Moyen facile :
Usage:
la source
Il y a une autre solution. Si vous stockez votre couleur en tant que chaîne hexadécimale normale et que vous ne souhaitez pas lui ajouter d'opacité (FF principal): 1) Convertissez votre chaîne hexadécimale en entier Pour convertir une chaîne hexadécimale en entier, effectuez l'une des opérations suivantes:
ou
comme un préfixe de 0x (ou -0x) fera par défaut int.parse à radix de 16.
2) Ajoutez l'opacité à votre couleur via le code
la source
ThemeData
.Dans Flutter, il crée une couleur à partir de RVB avec alpha, utilisez
Comment utiliser la couleur hexadécimale:
Couleur hexagonale avec opacité:
// ou modifiez la valeur "FF"
Pour plus d'informations, suivez le lien officiel https://api.flutter.dev/flutter/dart-ui/Color-class.html
la source
utils.dart
exemple d'utilisation
la source
Pour référence générale. Il existe un moyen plus simple d'utiliser la bibliothèque Supercharged . Bien que vous puissiez utiliser des méthodes d'extension avec toutes les solutions mentionnées, vous trouverez une boîte à outils de bibliothèque utilisateur pratique.
Plus simple, non?
Suralimenté
la source
"#b74093"
? D'ACCORD...Vers la recette HEX
la source
Importez la nouvelle classe et utilisez-la comme ceci
HexToColor('#F2A03D')
la source
J'ai raté la réponse évidente en utilisant des nombres hexadécimaux pour le constructeur fromRGB:
la source
Vous pouvez cliquer sur Color Widget et il vous indique de manière plus approfondie comment ces lettres représentent. Vous pouvez également utiliser la méthode Color.fromARGB () pour créer des couleurs personnalisées, ce qui m'est beaucoup plus facile. Utilisez le site Web Flutter Doctor Color Picker pour choisir la couleur de votre choix pour votre application de flottement.
la source
Je ne sais pas pourquoi cela est abattu, c'était la solution pour moi.
Seul moyen qui n'a pas nécessité d'étapes supplémentaires
la source
Vous pouvez utiliser ce package from_css_color pour
Color
sortir d'une chaîne hexadécimale. Il prend en charge la notation hexadécimale RVB à trois et six chiffres.Pour des raisons d'optimisation, créez une instance Color une fois pour chaque couleur et stockez-la quelque part pour une utilisation ultérieure.
la source