Bagaimana cara menggunakan string warna heksadesimal di Flutter?

214

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

creativecreatorormaybenot
sumber

Jawaban:

350

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.

creativecreatorormaybenot
sumber
Anda belum dapat memiliki ekstensi metode statis di dart github.com/dart-lang/language/issues/723
Łukasz Wiśniewski
1
@ ŁukaszWiśniewski Ya, Anda bisa;) Anda tidak bisa memanggil mereka menggunakan kelas yang diperluas ( HexColor.fromHexberfungsi tetapi Color.fromHextidak).
creativecreatorormaybenot
Saya hanya terkejut bahwa Anda dapat melewati 0xFF sebagai bagian dari int
Hamish Johnson
@HamishJohnson 0xhanya menunjukkan bahwa digit berikut akan diuraikan sebagai hex heksadesimal
creativecreatorormaybenot
135

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
Jossef Harush
sumber
ini sangat bagus! juga bekerja dengan LinearGradient.
xhinoda
kelas HexColor tidak berfungsi untuk MaterialColor untuk saya, itu terus mengeluh tentang parameter kedua. Tolong bantu di sini
leeCoder
20

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

Zakria Khan
sumber
1
Sebaiknya simpan referensi ini, meskipun .withOpacity (0,2) cukup berguna untuk sebagian besar kasus.
Gauris Javier
18

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"));
Rockvole
sumber
18

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");
Alvin Konda
sumber
1
Thansk to @ jeroen-meijer untuk edit. Bahkan Anda dapat menggunakan liner yang satu ini juga jika Anda merasa mewahColor(int.parse('#000000'.replaceAll('#', '0xff')))
Alvin Konda
16

Jalan mudah :

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

Pemakaian:

Container(
    color: Color(int.parse(color)),
)
Serdar Polat
sumber
14

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);
Evgeny Kot
sumber
1
Saya membutuhkan "FF terkemuka" untuk Flutter's ThemeData.
creativecreatorormaybenot
Saya suka solusi ini karena kesederhanaannya, tetapi seperti yang disebutkan @creativecreatorormaybenot, FF terkemuka masih diperlukan.
KevinM
7

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

Amit Prajapati
sumber
5

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,
  )
)
Michael P. Bazos
sumber
5

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

Gauris Javier
sumber
4

"#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;
}
Nahuel Alejandro Cabrera
sumber
4
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')

watchdog0x
sumber
3

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

Color.fromRGBO(0xb7, 0x40, 0x93, 1),
Adam
sumber
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.

EyoelD
sumber
1
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

Rio Weber
sumber
0

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.

Alex Myznikov
sumber