Як я можу використовувати шістнадцяткові кольорові рядки у Flutter?

Як перетворити кольору рядка шістнадцятирічних як #b74093до Colorв Флаттера?

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

fromHexМетод також може бути оголошений в mixinабо classтому , що HexColorім'я має бути явно вказано для того , щоб використовувати його, але розширення корисно для toHexметоду, який може бути використаний в неявному вигляді . Ось приклад:

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

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

Недолік використання шестигранних рядків

Багато інших відповідей тут показують, як можна динамічно створювати Colorшістнадцяткову рядок, як я це робив вище. Однак це означає, що колір не може бути а const.
В ідеалі, ви б призначили свої кольори так, як я пояснив у першій частині цієї відповіді, що є більш ефективним, коли інстанціювання кольорів багато, що зазвичай стосується віджетів Flutter.

ColorКлас очікує , що ціле число ARGB. Оскільки ви намагаєтеся використовувати його зі RGBзначенням, представляйте його як int та префікс 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

якщо ви хочете використовувати шістнадцятковий код кольору, який знаходиться у такому форматі # 123456, то його дуже легко використовувати, створіть змінні типу "Колір" та призначте йому наступні значення.

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 .

використовуйте myhexcolor, і ви готові йти.

якщо ви хочете змінити непрозорість кольору безпосередньо з шестигранного коду, то змініть значення ff у 0xff на відповідне значення з таблиці нижче.

Шістнадцяткові значення непрозорості

100% - ФФ

95% - F2

90% - Е6

85% - D9

80% - КК

75% - BF

70% - B3

65% - А6

60% - 99

55% - 8С

50% - 80

45% - 73

40% - 66

35% - 59

30% - 4D

25% - 40

20% - 33

15% - 26

10% - 1А

5% - 0D

0% - 00

Щоб перетворити шістнадцятковий рядок у 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"));

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

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

Ви можете використовувати його так:

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

Легкий шлях :

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

Використання:

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

Є ще одне рішення. Якщо ви зберігаєте свій колір як звичайний шістнадцятковий рядок і не хочете додавати йому непрозорість (ведуча 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);

У 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

Шестнадцятковий колір із непрозорістю:

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

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,
  )
)

Для загальної довідки. Існує простіший спосіб використання бібліотеки Supercharged . Хоча ви можете використовувати методи розширення з усіма згаданими рішеннями, ви знайдете практичний інструментарій бібліотеки користувачів.

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

Простіше, правда?

Надзарядка

"#b74093"? ГАРАЗД...

До рецепту 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));
}

Імпортуйте новий клас і використовуйте його так HexToColor('#F2A03D')

Я пропустив очевидну відповідь, використовуючи шістнадцяткові числа для конструктора fromRGB:

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

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

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

Не знаю, чому це збивають, це було рішенням для мене.
Єдиний спосіб, який не потребував додаткових кроків

Ви можете використовувати цей пакунок from_css_color, щоб вийти Colorз шістнадцяткової рядки. Він підтримує три- та шестизначну RGB шістнадцяткові позначення.

Color color = fromCSSColor('#ff00aa')

Для оптимізації створити кольоровий екземпляр один раз для кожного кольору та зберегти його десь для подальшого використання.