Como uso seqüências de cores hexadecimais no Flutter?

Como faço para converter uma seqüência de cor hexadecimal como #b74093a um Colorem vibração?

Em Flutter, a Colorclasse aceita apenas números inteiros como parâmetros , ou existe a possibilidade de usar os construtores nomeados fromARGBe fromRGBO.

Portanto, precisamos apenas converter a string #b74093em um valor inteiro. Também precisamos respeitar que a opacidade sempre precisa ser especificada.
255opacidade (total) é representada pelo valor hexadecimal FF. Isso já nos deixa com 0xFF. Agora, só precisamos acrescentar nossa sequência de cores assim:

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

As letras podem, por opção, ser maiúsculas ou não:

const color = const Color(0xFFB74093);

A partir do Dart 2.6.0, você pode criar umextension para a Colorclasse que permite usar seqüências de cores hexadecimais para criar um Colorobjeto:

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

O fromHexmétodo também pode ser declarado em mixinou classporque o HexColornome precisa ser especificado explicitamente para usá-lo, mas a extensão é útil para o toHexmétodo, que pode ser usado implicitamente. Aqui está um exemplo:

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

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

Desvantagem do uso de cadeias hexadecimais

Muitas das outras respostas aqui mostram como você pode criar dinamicamente um a Colorpartir de uma string hexadecimal, como eu fiz acima. No entanto, fazer isso significa que a cor não pode ser a const.
Idealmente, você atribuiria suas cores da maneira que expliquei na primeira parte desta resposta, que é mais eficiente ao instanciar muitas cores, o que geralmente é o caso dos widgets do Flutter.

A Colorclasse espera um número inteiro ARGB. Como você tenta usá-lo com RGBvalor, represente-o como int e prefixe-o com 0xff.

Color mainColor = Color(0xffb74093);

Se você ficar chateado com isso e ainda desejar usar strings, poderá estender Colore adicionar um construtor de strings

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 você deseja usar o código hexadecimal de cor que está nesse formato # 123456, ele é muito facilmente usado, crie variáveis ​​A do tipo Color e atribua os seguintes valores a ele.

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 e você está pronto para começar.

se você quiser alterar a opacidade da cor diretamente do código hexadecimal, altere o valor ff em 0xff para o valor respectivamente da tabela abaixo.

Valores de opacidade hexadecimal

100% - FF

95% - F2

90% - E6

85% - D9

80% - CC

75% - AM

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 converter de String hexadecimal em int, faça:

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

Exemplo de chamada:

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

Uma função simples sem usar uma classe:

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

Você pode usá-lo assim:

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

Jeito fácil :

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

Uso:

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

Existe outra solução. Se você armazena sua cor como uma sequência hexadecimal normal e não deseja adicionar opacidade (FF inicial): 1) Converta sua sequência hexadecimal em int Para converter uma sequência hexadecimal em um número inteiro, siga um destes procedimentos:

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

ou

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

como um prefixo de 0x (ou -0x) tornará int.parse o padrão para a raiz de 16.

2) Adicione opacidade à sua cor via código

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

No Flutter, ele cria uma cor RGB com alfa, use

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

Como usar a cor hexadecimal:

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

Cor hexagonal com opacidade:

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

// ou altere o 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 mais, siga o link oficial 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));
}

exemplo de uso

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

Para referência geral. Existe uma maneira mais simples de usar a biblioteca Supercharged . Embora você possa usar métodos de extensão com todas as soluções mencionadas, você encontra um prático kit de ferramentas da biblioteca do usuário.

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

Mais fácil, certo?

Sobrecarregado

"#b74093"? ESTÁ BEM...

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

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 a nova classe e use-a assim HexToColor('#F2A03D')

Perdi a resposta óbvia usando números hexadecimais para o construtor fromRGB:

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

Você pode clicar no widget de cores e ele fornece informações muito mais detalhadas sobre como essas letras representam. Você também pode usar o método Color.fromARGB () para criar cores personalizadas, o que é muito mais fácil para mim. Use o site do Flutter Doctor Color Picker para escolher a cor que você deseja para o seu aplicativo de vibração.

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

Não sei por que isso está sendo derrubado, essa foi a solução para mim.
A única maneira de não exigir etapas adicionais

Você pode usar este pacote from_css_color para Colorsair de uma sequência hexadecimal. Ele suporta notação hexadecimal RGB de três e seis dígitos.

Color color = fromCSSColor('#ff00aa')

Para fins de otimização, crie uma instância de Color uma vez para cada cor e armazene-a em algum lugar para uso posterior.