मैं फ़्लटर में हेक्साडेसिमल रंग के तारों का उपयोग कैसे करूं?

215

कैसे मैं एक परिवर्तित हेक्साडेसिमल रंग स्ट्रिंग की तरह #b74093एक के Colorस्पंदन में?

colors  dart  flutter 
— creativecreatorormaybenot
स्रोत

जवाबों:

354

स्पंदन में Colorवर्ग केवल पूर्णांकों को मापदंडों के रूप में स्वीकार करता है , या नामित निर्माणकर्ताओं का उपयोग करने की संभावना है fromARGBऔर fromRGBO।

इसलिए हमें केवल स्ट्रिंग #b74093को पूर्णांक मान में बदलने की आवश्यकता है । इसके अलावा, हमें इस बात का सम्मान करना होगा कि अपारदर्शिता को हमेशा निर्दिष्ट करने की आवश्यकता है।
255(पूर्ण) अस्पष्टता को हेक्साडेसिमल मान द्वारा दर्शाया गया है FF। यह पहले ही हमारा साथ छोड़ देता है 0xFF। अब, हमें बस इस तरह से अपने रंग स्ट्रिंग को जोड़ने की आवश्यकता है:

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

पसंद के हिसाब से अक्षरों को बड़ा किया जा सकता है या नहीं:

const color = const Color(0xFFB74093);

डार्ट के साथ शुरू करके 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।
आदर्श रूप से, आप अपने रंगों को इस तरह से बताएंगे, जैसा कि मैंने इस उत्तर के पहले भाग में बताया था, जो कि रंगों को त्वरित करते समय अधिक कुशल होता है, जो आमतौर पर स्पंदन विगेट्स के लिए होता है।

— creativecreatorormaybenot
स्रोत
आपके पास अभी तक dart
— --ukasz Wiśniewski
1
@ YesukaszWiśniewski हाँ, आप कर सकते हैं;) आप बस उन्हें उस वर्ग का उपयोग करके नहीं बुला सकते जो विस्तारित है ( HexColor.fromHexकाम करता है लेकिन Color.fromHexनहीं करता है)।
— क्रिएटिवक्रोमोरमैबिनॉट
मुझे आश्चर्य है कि आप 0xFF को इंट के भाग के रूप में पास कर सकते हैं
— हमीश जॉनसन
@ HamishJohnson 0xकेवल संकेत देता है कि निम्नलिखित अंक एक हेक्साडेसिमल के रूप में पार्स किए जाएंगे orm
— Creativecreatorormaybenot
136

Colorवर्ग एक ARGB पूर्णांक की उम्मीद है। चूंकि आप इसे RGBमूल्य के साथ उपयोग करने का प्रयास करते हैं, इसे इंट के रूप में दर्शाते हैं और इसके साथ उपसर्ग करते हैं 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
— जोसेफ हर्ष
स्रोत
यह वास्तव में बहुत अच्छा है! LinearGradient के साथ भी काम करता है।
— xhinoda
HexColor वर्ग मेरे लिए MaterialColor के लिए काम नहीं करता था, यह दूसरे पैरामीटर की शिकायत रखता है। कृपया यहाँ मदद करें
— leeCoder
21

यदि आप रंग के हेक्स कोड का उपयोग करना चाहते हैं जो इस प्रारूप # 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 का उपयोग करें और आप जाने के लिए तैयार हैं।

यदि आप हेक्स कोड से प्रत्यक्ष रंग की अस्पष्टता को बदलना चाहते हैं तो नीचे दिए गए तालिका से क्रमशः 0xff में ff मान को बदल दें।

हेक्स अपारदर्शिता मान

100% - एफएफ

95% - F2

90% - ई 6

85% - डी 9

80% - सीसी

75% - बीएफ

70% - बी 3

65% - ए 6

60% - 99

55% - 8 सी

50% - 80

45% - 73

40% - 66

35% - 59

30% - 4 डी

25% - 40

20% - 33

15% - 26

10% - 1 ए

5% - 0 डी

0% - 00

— जकरिया खान
स्रोत
1
इस संदर्भ को सहेजना एक अच्छा विचार है।
— गौरी जेवियर
18

हेक्साडेसिमल स्ट्रिंग से इंट में बदलने के लिए, करें:

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"));
— Rockvole
स्रोत
18

एक वर्ग का उपयोग किए बिना एक सरल कार्य:

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

आप इसे इस तरह से उपयोग कर सकते हैं:

Color color1 = _colorFromHex("b74093");
Color color2 = _colorFromHex("#b74093");
— एल्विन कोंडा
स्रोत
1
एडिट के लिए @ jeroen-meijer को धन्यवाद। वास्तव में आप इस एक लाइनर का उपयोग कर सकते हैं यदि आप फैंसी महसूस करते हैंColor(int.parse('#000000'.replaceAll('#', '0xff')))
— एल्विन कोंडा
14

एक और उपाय है। यदि आप अपने रंग को सामान्य हेक्स स्ट्रिंग के रूप में संग्रहीत करते हैं और इसमें अपारदर्शिता नहीं जोड़ना चाहते हैं (अग्रणी FF): 1) अपने हेक्स स्ट्रिंग को पूर्णांक में बदलें हेक्स-स्ट्रिंग को पूर्णांक में बदलने के लिए, निम्न में से एक करें:

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

या

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

0x (या -0x) के उपसर्ग के रूप में 16 के मूलांक के लिए int.parse को डिफ़ॉल्ट बना देगा।

2) कोड के माध्यम से अपने रंग में अस्पष्टता जोड़ें

Color color = new Color(myInt).withOpacity(1.0);
— एवगेनी कोट
स्रोत
1
मुझे स्पंदन के लिए "अग्रणी एफएफ" की आवश्यकता थी ThemeData।
— क्रिएटिवक्रिएटोरमेयबेनोट
मुझे इसकी सरलता के लिए यह समाधान पसंद है, लेकिन जैसा कि @creativecreatorormaybenot ने उल्लेख किया है, अग्रणी FF की अभी भी आवश्यकता है।
— केविनएम
7

स्पंदन में यह अल्फा, उपयोग के साथ 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 पर जाएं

— अमित प्रजापति
स्रोत
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));
}

उदाहरण उपयोग

Text(
  'hello world',
  style: TextStyle(
    color: getColorFromHex('#aabbcc'),
    fontWeight: FontWeight.bold,
  )
)
— माइकल पी। बाजोस
स्रोत
5

सामान्य संदर्भ के लिए। पुस्तकालय Supercharged का उपयोग करने का एक सरल तरीका है । यद्यपि, आप उल्लेख किए गए सभी समाधानों के साथ विस्तार विधियों का उपयोग कर सकते हैं, आप व्यावहारिक उपयोगकर्ता लाइब्रेरी टूलकिट पाते हैं।

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

आसान है, है ना?

supercharged

— गौरीस जेवियर
स्रोत
4

"#b74093"? ठीक है...

हेक्स पकाने की विधि के लिए

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;
}
— नहुएल एलेजांद्रो सबेरा
स्रोत
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));
}

नए वर्ग का आयात करें और इसे इस तरह उपयोग करें HexToColor('#F2A03D')

— watchdog0x
स्रोत
3

मैं fromRGB कंस्ट्रक्टर के लिए हेक्स संख्या का उपयोग करके स्पष्ट उत्तर देने से चूक गया:

Color.fromRGBO(0xb7, 0x40, 0x93, 1),
— एडम
स्रोत
1

आप कलर विजेट पर क्लिक कर सकते हैं और यह आपको बहुत गहरी जानकारी में बताता है कि वे अक्षर किस तरह से खड़े हैं। आप कस्टम रंग बनाने के लिए Color.fromARGB () विधि का भी उपयोग कर सकते हैं जो मेरे लिए बहुत आसान है। अपने फ़्लटर एप्लिकेशन के लिए किसी भी रंग को चुनने के लिए फ़्लटर डॉक्टर कलर पिकर वेबसाइट का उपयोग करें ।

— EyoelD
स्रोत
1 
String hexString = "45a3df";
Color(int.parse("0xff${hexString}"));

पता नहीं क्यों यह नीचे गिराया जा रहा है, यह मेरे लिए समाधान था।
केवल उसी तरह जिसे अतिरिक्त चरणों की आवश्यकता नहीं थी

— रियो वेबर
स्रोत
0

एक हेक्स स्ट्रिंग से बाहर निकलने के लिए आप इस पैकेज का उपयोग_सेक_कोलर में कर सकते हैं Color। यह तीन और छह अंकों के आरजीबी हेक्स नोटेशन दोनों का समर्थन करता है।

Color color = fromCSSColor('#ff00aa')

अनुकूलन के लिए प्रत्येक रंग के लिए एक बार कलर इंस्टेंस बनाएं और बाद में उपयोग के लिए कहीं स्टोर करें।

— एलेक्स मेज़निकोव
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.