¿Cómo convierto una cadena de color hexadecimal como #b74093
a Color
en Flutter?
¿Cómo convierto una cadena de color hexadecimal como #b74093
a Color
en Flutter?
Respuestas:
En Flutter, la Color
clase solo acepta enteros como parámetros , o existe la posibilidad de usar los constructores con nombre fromARGB
y fromRGBO
.
Entonces solo necesitamos convertir la cadena #b74093
a un valor entero. También debemos respetar que la opacidad siempre debe especificarse.
255
La opacidad (completa) está representada por el valor hexadecimal FF
. Esto ya nos deja con 0xFF
. Ahora, solo necesitamos agregar nuestra cadena de color de esta manera:
const color = const Color(0xffb74093); // Second `const` is optional in assignments.
Las letras pueden ser elegidas con mayúscula o no:
const color = const Color(0xFFB74093);
Comenzando con Dart 2.6.0
, puede crear unextension
para la Color
clase que le permita usar cadenas de color hexadecimales para crear un Color
objeto:
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')}';
}
El fromHex
método también se puede declarar en mixin
o class
porque el HexColor
nombre debe especificarse explícitamente para poder usarlo, pero la extensión es útil para el toHex
método, que puede usarse implícitamente. Aquí hay un ejemplo:
void main() {
final Color color = HexColor.fromHex('#aabbcc');
print(color.toHex());
print(const Color(0xffaabbcc).toHex());
}
Muchas de las otras respuestas aquí muestran cómo se puede crear dinámicamente a Color
partir de una cadena hexadecimal, como hice anteriormente. Sin embargo, hacer esto significa que el color no puede ser a const
.
Idealmente, asignaría sus colores de la manera que expliqué en la primera parte de esta respuesta, que es más eficiente cuando se crean muchas instancias de colores, que suele ser el caso de los widgets Flutter.
HexColor.fromHex
funciona pero Color.fromHex
no funciona).
0x
solo indica que los siguientes dígitos se analizarán como un hexadecimal 🙃
La Color
clase espera un número entero ARGB. Como intentas usarlo con RGB
valor, representalo como int y ponle el prefijo 0xff
.
Color mainColor = Color(0xffb74093);
Si esto le molesta y aún desea usar cadenas, puede extender Color
y agregar un constructor de cadenas
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
si desea usar un código hexadecimal de color que esté en este formato # 123456, entonces se puede usar muy fácilmente, cree variables A de tipo Color y asígnele los siguientes valores.
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 .
use myhexcolor y ya está listo para comenzar.
si desea cambiar la opacidad del color directamente desde el código hexadecimal, cambie el valor ff en 0xff al valor respectivamente de la tabla a continuación.
Valores de opacidad hexadecimal
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
Para convertir de cadena hexadecimal a int, haga:
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;
}
Ejemplo de llamada:
Color color=new Color(hexToInt("FFB74093"));
Una función simple sin usar una clase:
Color _colorFromHex(String hexColor) {
final hexCode = hexColor.replaceAll('#', '');
return Color(int.parse('FF$hexCode', radix: 16));
}
Puedes usarlo así:
Color color1 = _colorFromHex("b74093");
Color color2 = _colorFromHex("#b74093");
Color(int.parse('#000000'.replaceAll('#', '0xff')))
Manera fácil :
String color = yourHexColor.replaceAll('#', '0xff');
Uso:
Container(
color: Color(int.parse(color)),
)
Hay otra solucion. Si almacena su color como una cadena hexadecimal normal y no desea agregarle opacidad (FF inicial): 1) Convierta su cadena hexadecimal en int Para convertir una cadena hexadecimal en un entero, realice una de las siguientes acciones:
var myInt = int.parse(hexString, radix: 16);
o
var myInt = int.parse("0x$hexString");
como prefijo de 0x (o -0x) hará que int.parse tenga el valor predeterminado de radix de 16.
2) Agregue opacidad a su color a través del código
Color color = new Color(myInt).withOpacity(1.0);
ThemeData
.
En Flutter crea un color de RGB con alfa, usa
return new Container(
color: new Color.fromRGBO(0, 0, 0, 0.5),
);
Cómo usar el color hexadecimal:
return new Container(
color: new Color(0xFF4286f4),
);
//0xFF -> the opacity (FF for opaque)
//4286f4 -> the hex-color
Color hexagonal con opacidad:
return new Container(
color: new Color(0xFF4286f4).withOpacity(0.5),
);
// o cambiar el valor "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
Para obtener más información, siga el enlace oficial https://api.flutter.dev/flutter/dart-ui/Color-class.html
///
/// 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));
}
Text(
'hello world',
style: TextStyle(
color: getColorFromHex('#aabbcc'),
fontWeight: FontWeight.bold,
)
)
Para referencia general. Hay una manera más simple de usar la biblioteca Supercharged . Aunque puede usar métodos de extensión con todas las soluciones mencionadas, encontrará un práctico kit de herramientas de biblioteca de usuario.
"#ff00ff".toColor(); // painless hex to color
"red".toColor(); // supports all web color names
Más fácil, ¿verdad?
"#b74093"
? OKAY...
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));
}
Importe la nueva clase y úsela así HexToColor('#F2A03D')
Puede hacer clic en Color Widget y le informa con mucha más profundidad cómo representan esas letras. También puede usar el método Color.fromARGB () para crear colores personalizados que es mucho más fácil para mí. Use el sitio web de Flutter Doctor Color Picker para elegir el color que desee para su aplicación de flutter.
Puede usar este paquete from_css_color para Color
salir de una cadena hexadecimal. Admite notación hexadecimal RGB de tres y seis dígitos.
Color color = fromCSSColor('#ff00aa')
Para optimizar, cree una instancia de Color una vez para cada color y guárdela en algún lugar para su uso posterior.