colors - primary - ¿Cómo uso cadenas de color hexadecimales en Flutter?

primary swatch flutter

Question

¿Cómo convierto una cadena de color hexadecimal como #b74093 a un Color en Flutter?

Answer 1

En Flutter, la clase Color solo acepta números enteros como parámetros, o existe la posibilidad de usar los constructores con nombre de fromARGB y de fromRGBO .

Así que solo necesitamos convertir la cadena #b74093 a un valor entero. También debemos respetar que la opacidad siempre necesita ser especificada.
255 opacidad 255 (total) está representada por el valor hexadecimal FF . Esto ya nos deja con 0xFF . Ahora, solo tenemos que añadir nuestra cadena de color como esta:

final color = const Color(0xffb74093);

Las letras pueden ser mayúsculas o no:

final color = const Color(0xFFB74093);

Answer 2

Hay otra solución. Si almacena su color como cadena hexagonal normal y no desea agregarle opacidad (FF inicial): 1) Convierta su cadena hexadecimal a int Para convertir una cadena hexadecimal a un entero, realice una de las siguientes acciones:

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

o

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

como un prefijo de 0x (o -0x) hará que int.parse se fije por defecto a radix de 16.

2) Añade opacidad a tu color a través del código

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

Answer 3

La clase Color espera un entero ARGB. Ya que intenta usarlo con el valor RGB , represéntelo como int y 0xff con 0xff .

Color mainColor = Color(0xffb74093);

Si esto te molesta y aún deseas utilizar cadenas, puedes 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

Answer 4

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

Answer 5

Puede hacer clic en Widget de color y le ofrece información mucho más detallada sobre el significado de esas letras. También puede usar el método Color.fromARGB () para crear colores personalizados, lo cual es mucho más fácil para mí. Use el sitio web Flutter Doctor Color Picker para elegir el color que desee para su aplicación de flutter.

Answer 6

const appBackground = Color (0xffdf7599);

df7599 es el código hexadecimal de tu color

Answer 7

si su color es # e41749 solo agregue antes 0xff

para que puedas escribirlo como:

color: color (0xffe41749);

Answer 8

"#b74093" ? DE ACUERDO...

A la receta HEX

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

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

Importe la nueva clase y utilícela como esta HexToColor(''#F2A03D'')