Làm cách nào để sử dụng chuỗi màu thập lục phân trong Flutter?

Làm thế nào để chuyển đổi một chuỗi màu thập lục phân như #b74093một Colortrong Flutter?

Trong Flutter, Colorlớp chỉ chấp nhận các số nguyên làm tham số hoặc có khả năng sử dụng các hàm tạo có tên fromARGBvà fromRGBO.

Vì vậy, chúng ta chỉ cần chuyển đổi chuỗi #b74093thành một giá trị số nguyên. Ngoài ra chúng ta cần phải tôn trọng rằng độ mờ luôn cần được chỉ định.
255Độ mờ (đầy đủ) được biểu thị bằng giá trị thập lục phân FF. Điều này đã để lại cho chúng tôi với 0xFF. Bây giờ, chúng ta chỉ cần nối thêm chuỗi màu như thế này:

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

Các chữ cái có thể được viết hoa hoặc không:

const color = const Color(0xFFB74093);

Bắt đầu với Dart 2.6.0, bạn có thể tạoextension cho Colorlớp cho phép bạn sử dụng chuỗi màu thập lục phân để tạo ra một Colorđối tượng:

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

Các fromHexphương pháp cũng có thể được khai báo trong một mixinhoặc classvì HexColortên cần phải được xác định một cách rõ ràng để sử dụng nó, nhưng phần mở rộng rất hữu ích cho các toHexphương pháp, có thể được sử dụng ngầm. Đây là một ví dụ:

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

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

Nhược điểm của việc sử dụng chuỗi hex

Nhiều câu trả lời khác ở đây cho thấy cách bạn có thể tự động tạo một Colorchuỗi từ chuỗi hex, như tôi đã làm ở trên. Tuy nhiên, làm điều này có nghĩa là màu sắc không thể là a const.
Lý tưởng nhất là bạn sẽ gán màu cho mình theo cách tôi đã giải thích trong phần đầu tiên của câu trả lời này, sẽ hiệu quả hơn khi tạo màu sắc rất nhiều, thường là trường hợp cho các widget Flutter.

Các Colorlớp học hy vọng một số nguyên ARGB. Vì bạn cố gắng sử dụng nó với RGBgiá trị, hãy biểu thị nó dưới dạng int và tiền tố với nó 0xff.

Color mainColor = Color(0xffb74093);

Nếu bạn cảm thấy khó chịu vì điều này và vẫn muốn sử dụng chuỗi, bạn có thể mở rộng Colorvà thêm một hàm tạo chuỗi

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

sử dụng

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

Nếu bạn muốn sử dụng mã hex màu có định dạng # 123456 này thì rất dễ sử dụng, hãy tạo A biến loại Màu và gán các giá trị sau cho nó.

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 .

sử dụng myhexcolor và bạn đã sẵn sàng để đi.

nếu bạn muốn thay đổi độ mờ của màu trực tiếp từ mã hex thì hãy thay đổi giá trị ff trong 0xff thành giá trị tương ứng từ bảng bên dưới.

Giá trị độ mờ Hex

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

Để chuyển đổi từ chuỗi thập lục phân sang int, hãy:

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

Ví dụ gọi:

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

Một hàm đơn giản mà không cần sử dụng một lớp:

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

Bạn có thể sử dụng nó như thế này:

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

Cách dễ dàng :

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

Sử dụng:

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

Có một giải pháp khác. Nếu bạn lưu trữ màu của mình dưới dạng chuỗi hex bình thường và không muốn thêm độ mờ cho nó (FF hàng đầu): 1) Chuyển đổi chuỗi hex của bạn thành int Để chuyển đổi chuỗi hex thành số nguyên, hãy thực hiện một trong các thao tác sau:

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

hoặc là

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

làm tiền tố 0x (hoặc -0x) sẽ đặt int.parse mặc định thành cơ số 16.

2) Thêm độ mờ cho màu của bạn thông qua mã

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

Trong Flutter, nó tạo ra màu từ RGB bằng alpha, sử dụng

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

Cách sử dụng màu lục giác:

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

Hex-color với độ mờ đục:

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

// hoặc thay đổi giá trị "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

Để biết thêm theo liên kết chính thức 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));
}

sử dụng ví dụ

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

Để tham khảo chung. Có một cách đơn giản hơn bằng cách sử dụng thư viện Superchargeed . Mặc dù, bạn có thể sử dụng các phương thức mở rộng với tất cả các giải pháp được đề cập, bạn tìm thấy bộ công cụ thư viện người dùng thực tế.

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

Dễ dàng hơn phải không?

Tăng áp

"#b74093"? ĐỒNG Ý...

Để công thức 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));
}

Nhập lớp mới và sử dụng nó như thế này HexToColor('#F2A03D')

Tôi đã bỏ lỡ câu trả lời rõ ràng bằng cách sử dụng số hex cho hàm tạo fromRGB:

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

Bạn có thể nhấp vào Color Widget và nó cho bạn biết thông tin sâu hơn nhiều về cách các chữ cái đó đại diện. Bạn cũng có thể sử dụng phương thức Color.fromARGB () để tạo các màu tùy chỉnh dễ dàng hơn nhiều đối với tôi. Sử dụng trang web Flutter Doctor Color Picker để chọn bất kỳ màu nào bạn muốn cho ứng dụng rung của mình.

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

Không biết tại sao điều này bị hạ thấp, đây là giải pháp cho tôi.
Cách duy nhất không yêu cầu các bước bổ sung

Bạn có thể sử dụng gói này từ_css_color để thoát Colorkhỏi chuỗi hex. Nó hỗ trợ cả ký hiệu hex hex ba và sáu chữ số.

Color color = fromCSSColor('#ff00aa')

Để tối ưu hóa, hãy tạo màu thể hiện một lần cho mỗi màu và lưu nó ở đâu đó để sử dụng sau.