Flutter'da onaltılık renk dizelerini nasıl kullanabilirim?

Nasıl dönüştürebilirim onaltılık renk dize gibi #b74093bir etmek ColorFlutter içinde?

Flutter yılında Colorsınıf yalnızca kabul tamsayılar parametre olarak veya adlandırılmış kurucular kullanmak olasılığı vardır fromARGBve fromRGBO.

Bu nedenle, yalnızca dizeyi #b74093bir tamsayı değerine dönüştürmemiz gerekir . Ayrıca opaklığın her zaman belirtilmesi gerektiğine saygı duymalıyız .
255(tam) opaklık onaltılık değerle temsil edilir FF. Bu zaten bizi bırakıyor 0xFF. Şimdi, sadece renk dizemizi şöyle eklemeliyiz:

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

Harfler seçime göre büyük harfle yazılabilir veya yazılmayabilir:

const color = const Color(0xFFB74093);

Dart ile başlayarak 2.6.0, bir oluşturabilirextension için Colorbir oluşturmak için onaltılık renk dizeleri kullanmanızı sağlar sınıfın Colornesnesi:

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

fromHexYöntem ayrıca beyan edilebilir mixinveya classçünkü HexColoradı açıkça kullanmak için belirtilmesi gerekir, ancak uzatma için yararlıdır toHexörtülü kullanılabilir yöntemi. İşte bir örnek:

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

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

Altıgen dizeleri kullanmanın dezavantajı

Buradaki diğer yanıtların birçoğu, Coloryukarıda yaptığım gibi, bir hex dizesinden nasıl dinamik olarak oluşturabileceğinizi gösterir . Ancak, bunu yapmak rengin a olamaz const.
İdeal olarak, renklerinizi bu cevabın ilk bölümünde açıkladığım şekilde atarsınız, bu da renkleri çok fazla somutlaştırırken daha etkilidir, bu genellikle Flutter widget'ları için geçerlidir.

ColorSınıf ARGB tamsayı beklemektedir. RGBDeğeri ile kullanmaya çalıştığınız için int olarak gösterin ve önekini ekleyin 0xff.

Color mainColor = Color(0xffb74093);

Bu durumdan rahatsız olursanız ve yine de dize kullanmak istiyorsanız, Colorbir dize oluşturucu genişletebilir ve ekleyebilirsiniz.

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

kullanım

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

# 123456 biçimindeki onaltılık renk kodunu kullanmak istiyorsanız, çok kolay bir şekilde kullanılabilir, Color türünde bir değişken oluşturun ve buna aşağıdaki değerleri atayı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 .

myhexcolor kullanın ve gitmeye hazırsınız.

renklerin saydamlık kodundan doğrudan opaklığını değiştirmek istiyorsanız, 0xff'deki ff değerini aşağıdaki tablodan sırasıyla değiştirin.

Onaltılık Opaklık Değerleri

% 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

Sınıf kullanmadan basit bir işlev:

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

Bu şekilde kullanabilirsiniz:

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

Onaltılık String'ten int'e dönüştürmek için şunları yapın:

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

Çağrı örneği:

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

Kolay yol :

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

Kullanımı:

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

Başka bir çözüm daha var. Renginizi normal onaltılı dize olarak saklarsanız ve ona opaklık eklemek istemiyorsanız (önde gelen FF): 1) Onaltılı dizenizi int'e dönüştürün Onaltılık bir dizeyi bir tamsayıya dönüştürmek için aşağıdakilerden birini yapın:

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

veya

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

0x (veya -0x) öneki olarak int.parse varsayılan değerini 16 yarıçapı yapar.

2) Kodunuzla renginize opaklık ekleyin

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

Flutter'da alfa ile RGB'den bir renk oluşturur,

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

Altıgen renk nasıl kullanılır:

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

Opaklık ile onaltılık renk:

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

// veya "FF" değerini değiştirin

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

Daha fazla bilgi için resmi bağlantıyı takip edin 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));
}

örnek kullanım

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

Genel referans için. Supercharged kütüphanesini kullanmanın daha basit bir yolu var . Bahsedilen tüm çözümlerle uzantı yöntemlerini kullanabilmenize rağmen, pratik kullanıcı kütüphanesi araç setini bulabilirsiniz.

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

Daha kolay, değil mi?

kompresörlü

"#b74093"? TAMAM...

HEX Tarifine

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

Yeni sınıfı içe aktarın ve böyle kullanın HexToColor('#F2A03D')

Ben fromRGB yapıcı için onaltılık sayılar kullanarak bariz cevap cevapsız:

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

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

Bunun neden çöktüğünü bilmiyorum, bu benim için bir çözümdü.
Ek adımlar gerektirmeyen tek yol

Renk Widget'ı tıklayabilirsiniz ve bu harflerin nasıl durduğunu çok daha derinlemesine bilgilendirir. Benim için çok daha kolay olan özel renkler oluşturmak için Color.fromARGB () yöntemini de kullanabilirsiniz. Kullanım Flutter Doktor Renk Seçici web sitesi çarpıntı uygulaması için istediğiniz herhangi bir renk seçmek için.

Onaltılık bir dizeden çıkmak için bu paketi from_css_color kullanabilirsiniz Color. Hem üç hem de altı basamaklı RGB hex gösterimini destekler.

Color color = fromCSSColor('#ff00aa')

Optimizasyon için her renk için bir kez Color örneği oluşturun ve daha sonra kullanmak üzere bir yerde saklayın.