어떻게 변환 할 16 진수 색상 문자열을 같이 #b74093
A와 Color
플러터에?
어떻게 변환 할 16 진수 색상 문자열을 같이 #b74093
A와 Color
플러터에?
답변:
플러터에서 Color
클래스 만 수락 정수를 매개 변수로 , 또는 명명 된 생성자를 사용할 수있는 가능성이 fromARGB
하고 fromRGBO
.
따라서 문자열 만 #b74093
정수 값 으로 변환하면 됩니다. 또한 불투명도를 항상 지정 해야한다는 점을 존중해야 합니다.
255
(전체) 불투명도는 16 진수 값으로 표시됩니다 FF
. 이것은 이미 우리를 떠난다 0xFF
. 이제 다음과 같이 색상 문자열을 추가하면됩니다.
const color = const Color(0xffb74093); // Second `const` is optional in assignments.
글자는 선택에 따라 대문자로 표시 할 수 있습니다.
const color = const Color(0xFFB74093);
Dart로 시작2.6.0
extension
Color
하면 16 진수 색상 문자열을 사용하여 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
은 위에서와 같이 16 진수 문자열을 동적으로 생성하는 방법을 보여줍니다 . 그러나 이렇게하면 색상이 색이 될 수 없습니다 const
.
이상적으로,이 답변의 첫 번째 부분에서 설명한 방식으로 색상을 지정하면 색상을 많이 인스턴스화 할 때 더 효율적입니다. 일반적으로 Flutter 위젯의 경우입니다.
HexColor.fromHex
작동하지만 작동 Color.fromHex
하지 않는)를 사용하여 호출 할 수 는 없습니다.
0x
은 다음 숫자가 16 진수로 해석 될 것임을 나타냅니다.
이 Color
클래스는 ARGB 정수를 예상합니다. RGB
값 과 함께 사용하려고하므로 이를 int로 표시하고 접두어를 접두어로 사용하십시오 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
이 형식 # 123456의 16 진수 색상 코드를 사용하려면 매우 쉽게 사용할 수 있습니다. Color 유형의 변수를 만들고 다음 값을 지정하십시오.
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를 사용하면 갈 준비가 된 것입니다.
16 진수 코드에서 직접 색상의 불투명도를 변경하려면 0xff의 ff 값을 아래 표의 해당 값으로 변경하십시오.
16 진 불투명도 값
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
16 진 문자열을 int로 변환하려면 다음을 수행하십시오.
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"));
클래스를 사용하지 않는 간단한 함수 :
Color _colorFromHex(String hexColor) {
final hexCode = hexColor.replaceAll('#', '');
return Color(int.parse('FF$hexCode', radix: 16));
}
다음과 같이 사용할 수 있습니다.
Color color1 = _colorFromHex("b74093");
Color color2 = _colorFromHex("#b74093");
Color(int.parse('#000000'.replaceAll('#', '0xff')))
다른 해결책이 있습니다. 색상을 일반 16 진 문자열로 저장하고 불투명도를 추가하지 않으려면 (앞쪽 FF) : 1) 16 진 문자열을 int로 변환 16 진 문자열을 정수로 변환하려면 다음 중 하나를 수행하십시오.
var myInt = int.parse(hexString, radix: 16);
또는
var myInt = int.parse("0x$hexString");
접두사 0x (또는 -0x)는 int.parse를 기수 16으로 기본 설정합니다.
2) 코드를 통해 색상에 불투명도 추가
Color color = new Color(myInt).withOpacity(1.0);
ThemeData
.
Flutter에서는 RGB를 사용하여 알파로 색상을 만듭니다.
return new Container(
color: new Color.fromRGBO(0, 0, 0, 0.5),
);
16 진수 색상을 사용하는 방법 :
return new Container(
color: new Color(0xFF4286f4),
);
//0xFF -> the opacity (FF for opaque)
//4286f4 -> the hex-color
불투명 한 16 진 색상 :
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을 따르십시오
///
/// 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,
)
)
"#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;
}
당신은 색상 위젯을 클릭 할 수 있습니다 그리고 그것은 그 문자의 의미를 훨씬 더 많은 정보를 알려줍니다. Color.fromARGB () 메서드를 사용하여 훨씬 쉬운 사용자 지정 색을 만들 수도 있습니다. Flutter Doctor 색상 피커 웹 사이트를 사용하여 Flutter 응용 프로그램에 원하는 색상을 선택하십시오.
이 패키지 from_css_color 를 사용 Color
하여 16 진 문자열에서 벗어날 수 있습니다 . 3 자리 및 6 자리 RGB 16 진 표기법을 모두 지원합니다.
Color color = fromCSSColor('#ff00aa')
최적화를 위해 각 색상마다 Color 인스턴스를 한 번 만들고 나중에 사용하기 위해 어딘가에 저장하십시오.