どのようにして変換しない16進数のカラー文字列のよう#b74093
にColor
フラッターでは?
どのようにして変換しない16進数のカラー文字列のよう#b74093
にColor
フラッターでは?
回答:
Flutterでは、Color
クラスは整数をパラメーターとしてのみ受け入れるか、名前付きコンストラクターfromARGB
およびを使用する可能性がありfromRGBO
ます。
したがって、文字列#b74093
を整数値に変換するだけで済みます。また、不透明度は常に指定する必要があることを尊重する必要があります。
255
(完全)不透明度は16進数値で表されますFF
。これはすでに私たちに残ってい0xFF
ます。ここで、次のようにカラー文字列を追加するだけです。
const color = const Color(0xffb74093); // Second `const` is optional in assignments.
文字は大文字または小文字で選択できます。
const color = const Color(0xFFB74093);
ダートで始まる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進コードを使用する場合は、非常に簡単に使用できます。色タイプのA変数を作成し、それに次の値を割り当てます。
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"
?OK...
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 Widgetをクリックすると、これらの文字の意味がより詳細に表示されます。Color.fromARGB()メソッドを使用して、カスタムカラーを作成することもできます。Flutter Doctorカラーピッカー Webサイトを使用して、フラッターアプリケーションに使用する色を選択します。
このパッケージfrom_css_colorを使用Color
して、16進文字列から抜け出すことができます。3桁と6桁の両方のRGB 16進表記をサポートしています。
Color color = fromCSSColor('#ff00aa')
最適化のために、各色に対して一度Colorインスタンスを作成し、後で使用するためにどこかに保存します。