Как использовать шестнадцатеричные последовательности цветов в Flutter?

Как преобразовать шестнадцатеричную строку цвета, такую как #b74093 в Color в флаттере?

ОТВЕТЫ

Ответ 1

Во Flutter Color класс принимает только целые числа в качестве параметров, или есть возможность использовать именованные конструкторы fromARGB и fromRGBO.

Поэтому нам нужно только преобразовать строку #b74093 в целочисленное значение. Также необходимо учитывать, что непрозрачность всегда нужно указывать.
Непрозрачность 255 (полная) представлена шестнадцатеричным значением FF. Это уже оставляет нас с 0xFF. Теперь нам просто нужно добавить нашу цветовую строку следующим образом:

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

Буквы могут быть выбраны с большой буквы или нет:

const color = const Color(0xFFB74093);

Начиная с Dart 2.6.0, вы можете создать extension для класса Color, который позволит вам использовать шестнадцатеричные строки цвета для создания объекта Color:

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)}'
      '${red.toRadixString(16)}'
      '${green.toRadixString(16)}'
      '${blue.toRadixString(16)}';
}

Метод fromHex также может быть объявлен в mixin или class, поскольку для его использования необходимо явно указать имя HexColor, но расширение полезно для метода toHex, который может быть использован неявно. Вот пример:

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

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

Недостаток использования шестнадцатеричных строк

Многие другие ответы здесь показывают, как вы можете динамически создать Color из шестнадцатеричной строки, как я делал выше. Однако это означает, что цвет не может быть const.
В идеале вы должны назначать свои цвета так, как я объяснил в первой части этого ответа, что более эффективно при многократном создании экземпляров цветов, что обычно имеет место для виджетов Flutter.

Ответ 2

Класс Color ожидает целое число ARGB. Поскольку вы пытаетесь использовать его со значением RGB, представьте его как int и 0xff нему префикс 0xff.

Color mainColor = Color(0xffb74093);

Если вас это раздражает и вы все еще хотите использовать строки, вы можете расширить Color и добавить конструктор строк

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

использование

Color color1 = HexColor("b74093");
Color color2 = HexColor("#b74093");
Color color3 = HexColor("#88b74093"); // if you wish to use ARGB format

Ответ 3

Замените # на 0xff

если ваш цвет # e41749, то это будет 0xffe41749

Пример

color : Color(0xffe41749);

Ответ 4

Чтобы преобразовать из шестнадцатеричного String в int, выполните:

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

Пример вызова:

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

Ответ 5

Есть другое решение. Если вы сохраняете свой цвет как обычную шестнадцатеричную строку и не хотите добавлять к ней непрозрачность (начальная FF): 1) Преобразуйте вашу шестнадцатеричную строку в int Чтобы преобразовать шестнадцатеричную строку в целое число, выполните одно из следующих действий:

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

или же

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

в качестве префикса 0x (или -0x) будет установлен int.parse по умолчанию в основание 16.

2) Добавьте непрозрачность к вашему цвету через код

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

Ответ 6

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

Импортируйте новый класс и используйте его как этот HexToColor('#F2A03D')

Ответ 7

Простая функция без использования класса:

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

и используйте

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

Ответ 8

Простой способ:

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

Использование:

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

Ответ 9

"#b74093"? ХОРОШО...

К шестнадцатеричному рецепту

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

Ответ 10

В Flutter создайте цвет из RGB с альфа-каналом, используйте

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

Как использовать шестнадцатеричный цвет:

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

Hex-цвет с непрозрачностью:

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

//или измените значение "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

Для получения дополнительной перейдите по официальной ссылке https://api.flutter.dev/flutter/dart-ui/Color-class.html

Ответ 11

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

пример использования

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

Ответ 12

const appBackground = Color (0xffdf7599);

df7599 - это шестнадцатеричный код вашего цвета

Ответ 13

Вы можете нажать на Color Widget, и он расскажет вам гораздо глубже о том, как эти буквы обозначают. Вы также можете использовать метод Color.fromARGB() для создания пользовательских цветов, что намного проще для меня. Используйте веб-сайт Flutter Doctor Color Picker, чтобы выбрать любой цвет, который вы хотите для своего приложения флаттера.

Ответ 14

вот так, у вас шестнадцатеричное значение 052568 => 0xFF + 052568 => 0xFF052568

Проблема в том, что вам нужна непрозрачность, которая идет в старшем байте целого числа цвета. Поэтому мы должны добавить 0xFF000000.