Bagaimana cara menggunakan string warna heksadesimal di Flutter?

Bagaimana cara mengkonversi string warna heksadesimal seperti #b74093ke Colordalam Flutter?

Di Flutter, Colorkelas hanya menerima integer sebagai parameter , atau ada kemungkinan untuk menggunakan konstruktor fromARGBdan nama fromRGBO.

Jadi kita hanya perlu mengkonversi string #b74093ke nilai integer. Kita juga perlu menghormati bahwa opacity selalu perlu ditentukan.
255opacity (penuh) diwakili oleh nilai heksadesimal FF. Ini sudah meninggalkan kita 0xFF. Sekarang, kita hanya perlu menambahkan string warna kita seperti ini:

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

Huruf-huruf tersebut dapat dengan pilihan huruf besar atau kecil:

const color = const Color(0xFFB74093);

Dimulai dengan Dart 2.6.0, Anda bisa membuatextension untuk Colorkelas yang memungkinkan Anda menggunakan string warna heksadesimal untuk membuat Colorobjek:

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

The fromHexMetode juga bisa dinyatakan dalam mixinatau classkarena HexColornama perlu secara eksplisit ditentukan untuk menggunakannya, tetapi ekstensi berguna untuk toHexmetode, yang dapat digunakan secara implisit. Berikut ini sebuah contoh:

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

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

Kerugian menggunakan string hex

Banyak jawaban lain di sini menunjukkan bagaimana Anda dapat membuat secara dinamis Colordari string hex, seperti yang saya lakukan di atas. Namun, melakukan ini berarti bahwa warnanya tidak boleh a const.
Idealnya, Anda akan menetapkan warna Anda seperti yang saya jelaskan di bagian pertama dari jawaban ini, yang lebih efisien ketika membuat banyak warna, yang biasanya berlaku untuk widget Flutter.

The Colorkelas mengharapkan integer ARGB. Karena Anda mencoba menggunakannya dengan RGBnilai, gambarkan sebagai int dan awali dengan nilai 0xff.

Color mainColor = Color(0xffb74093);

Jika Anda merasa terganggu dengan ini dan masih ingin menggunakan string, Anda dapat memperluas Colordan menambahkan konstruktor string

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

pemakaian

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

jika Anda ingin menggunakan kode heks warna yang ada dalam format ini # 123456 maka sangat mudah digunakan, buat variabel A dari tipe Warna dan tetapkan nilai berikut untuk itu.

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 .

gunakan myhexcolor dan Anda siap untuk pergi.

jika Anda ingin mengubah opacity warna langsung dari kode hex kemudian ubah nilai ff dalam 0xff ke nilai masing-masing dari tabel di bawah ini.

Nilai Hex Opacity

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

Untuk mengkonversi dari String heksadesimal ke int, lakukan:

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

Contoh panggilan:

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

Fungsi sederhana tanpa menggunakan kelas:

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

Anda bisa menggunakannya seperti ini:

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

Jalan mudah :

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

Pemakaian:

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

Ada solusi lain. Jika Anda menyimpan warna Anda sebagai string hex normal dan tidak ingin menambahkan opacity ke dalamnya (FF terkemuka): 1) Konversi string hex Anda ke int Untuk mengkonversi string hex ke integer, lakukan salah satu dari yang berikut:

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

atau

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

sebagai awalan 0x (atau -0x) akan membuat int.parse default ke radix 16.

2) Tambahkan opacity ke warna Anda melalui kode

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

Di Flutter itu membuat warna dari RGB dengan alpha, gunakan

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

Cara menggunakan hex-color:

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

Hex-warna dengan opacity:

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

// atau ubah nilai "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

Untuk lebih lanjut, ikuti tautan resmi 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));
}

contoh penggunaan

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

Untuk referensi umum Ada cara sederhana menggunakan perpustakaan Supercharged . Meskipun, Anda dapat menggunakan metode ekstensi dengan semua solusi yang disebutkan, Anda menemukan toolkit pustaka pengguna praktis.

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

Lebih mudah, bukan?

Supercharged

"#b74093"? BAIK...

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

Impor kelas baru dan gunakan seperti ini HexToColor('#F2A03D')

Saya melewatkan jawaban yang jelas menggunakan nomor hex untuk konstruktor fromRGB:

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

Anda dapat mengklik Color Widget dan memberi tahu Anda informasi yang lebih dalam tentang bagaimana huruf-huruf itu berdiri. Anda juga dapat menggunakan metode Color.fromARGB () untuk membuat warna khusus yang jauh lebih mudah bagi saya. Gunakan situs Flutter Doctor Color Picker untuk memilih warna yang Anda inginkan untuk aplikasi flutter Anda.

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

Tidak tahu mengapa ini dijatuhkan, ini adalah solusi bagi saya.
Satu-satunya cara yang tidak memerlukan langkah-langkah tambahan

Anda dapat menggunakan paket ini dari_css_color untuk Colorkeluar dari string hex. Ini mendukung notasi RGB hex tiga dan enam digit.

Color color = fromCSSColor('#ff00aa')

Demi optimasi, buat Contoh warna sekali untuk setiap warna dan simpan di suatu tempat untuk penggunaan nanti.