Да, к сожалению, во 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 с большим количеством виджетом и большим количеством цветов, соответственно...и что самое важное - с огромным количеством обращений к ним при отрисовке интерфейса.
Поверьте, постоянное обращение к одним и тем же участкам памяти на каждом кадре это не то чего вы бы хотели.
Работа с константами оптимизируется на этапе компиляции и работа с ними предпочтительнее, чем работа с переменными.
Поэтому если Вы сами определяете цвета из шестнадцатиричной строки, то в идеале делайте это также, как показано на первых моих примерах, а именно с использованием констант.