0

Мне нравится работать с цветом в шестнадцатиричной форме, с помощью строк вида #RRGGBB (Например: #DD23CE).
Я привык к данной форме отображения цвета и считаю ее удобной.
Она используется в HTML/CSS, Photoshop'e, Figma, и пр. инструментах.
Используя её я могу не беспокоиться о корректном переносе дизайна из прототипов и макетов приложений.

Но, к большому сожалению, я не нашел способа работать с цветом в привычном мне формате.
При создании объекта цвета я могу указать только целое число, ПРИЧЕМ ТОЛЬКО ОДНО!
(Как вообще можно передать информацию о всех составляющих компонентах цвета одним целым числом?)


Внимание, вопрос:

  • Есть ли способ во Flutter'e работать с цветом в шестнадцатиричном формате?
  • Если нет, то есть ли способ преобразовать цвет из шестнадцатиричного формата?
1

1 ответ 1

1

Да, к сожалению, во Flutter при создании объекта Color вы можете указать только ОДНО целое число, либо воспользоваться именованными конструкторами fromARGB и fromRGBO с передачей всех компонентов цвета (все параметры также представлены в целочисленном формате) и для вашей задачи формально необходимо преобразовать данную строку в одно целое число.

Как вообще можно передать информацию о всех составляющих компонентах цвета одним целым числом?

Отвечаю:
переменная int в Dart занимает 32 бита

  • Биты с 24 по 31 отвечают за значение альфа-канала(прозрачности).
  • Биты с 16 по 23 отвечают за значение красной составляющей.
  • Биты с 8 по 15 отвечают за значение зеленой составляющей.
  • Биты с 0 по 7 отвечают за значение синей составляющей.

Разработчики Dart безусловно молодцы, что так ловно придумали способ хранения цвета в одном целочисленном значении, но как с этим жить мобильным разработчикам?

К счастью для простых разработчиков в Dart целые числа также могут использовать шестнадцатеричное представление. Они начинаются с префикса 0x и выглядят следующим образом:

int hex = 0xDEAFBB03;

Что, согласитесь, очень похоже на то, что вы обычно используете при записи цвета в шестнадцатиричной форме. В данном случае только разрядов больше. Поэтому во Flutter при создании цвета нужно указывать не только три составляющие цвета RGB (красный, зеленый, синий), но и непрозрачность.
Для корректного переноса цветов из формате RGB, непрозрачность всегда должна быть указана полная (255). В шестнадцатеричном формате это соответствует значению FF, которые должны быть указаны в первых двух разрядах.

Теперь нам просто нужно записать нашу цветовую строку следующим образом:

const color = const Color(0xffb74093); // Второй `const` при присваивании необязателен.

Буквы могут быть указаны как в нижнем, так и в верхнем регистре. (используйте то, что вам удобнее)

const color = const Color(0xFFB74093);

Если же Вы захотите указать непрозрачность отличную от полной, то вам придется самому перевести интенсивность данного канала в шестнадцатиричный формат либо же вы можете воспользоваться данной таблицей в качестве шпаргалки.(для других каналов она также работает)

Расширение класса

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

extension HexColor on Color {
  /// Строка может иметь формат "aabbcc" или "ffaabbcc" с необязательным префиксом "#".
  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));
  }

  /// Флаг leadingHashSign, отвечающий за наличие знака решетки в начале по умолчанию равен `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')}';
}

Метод fromHex() может быть объявлен как в расширении, так и в миксине или классе, потому что для его использования необходимо явно указать имя HexColor
Для метода toHex() же в свою очередь имеет смысл использовать именно расширение, которое можно использовать неявно.
Например:

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

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

Важное замечание (про переменные и константы)

Простота определения цветов из шестнадцатеричной строки может вызвать соблазн создавать их тут и там на лету, что в свою очередь может вызвать и негативный эффект.
В подавляющем большинстве материалов по Dart'у используются заранее определенные константы цветов. И это имеет смысл для приложений на Flutter'e с большим количеством виджетом и большим количеством цветов, соответственно...и что самое важное - с огромным количеством обращений к ним при отрисовке интерфейса.
Поверьте, постоянное обращение к одним и тем же участкам памяти на каждом кадре это не то чего вы бы хотели.
Работа с константами оптимизируется на этапе компиляции и работа с ними предпочтительнее, чем работа с переменными.

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

1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.