Flutterで16進数の色文字列を使用するにはどうすればよいですか?


回答:


350

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

16進文字列を使用することの欠点

ここでの他の回答の多くは、Color上記のように、16進文字列から動的にを作成する方法を示しています。ただし、これを行うと、色をにすることはできませんconst
理想的には、この回答の最初の部分で説明した方法で色を割り当てます。これは、Flutterウィジェットの場合によく見られる、色をたくさんインスタンス化する場合により効率的です。


あなたはダーツまだ静的メソッドの拡張子を持つことはできませんgithub.com/dart-lang/language/issues/723
ルカシュWisniewskiの

1
@ŁukaszWiśniewskiはい、できます;)拡張されたクラスを使用してそれらを呼び出すことはできません(HexColor.fromHex動作しますがColor.fromHex動作しません)。
クリエイティブクリエーターまたは

intの一部として0xFFを渡せることに驚いています
Hamish Johnson

@HamishJohnsonは0xちょうど🙃以下の数字は16進数として解析されることを示し
creativecreatorormaybenot

135

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

これは本当に素晴らしいです!LinearGradientでも動作します。
xhinoda

HexColorクラスは、MaterialColorでは機能しませんでした。2番目のパラメーターについて不平を言い続けます。ここで助けてください
leeCoder

20

この形式#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


1
.withOpacity(0.2)はほとんどの場合に十分に役立ちますが、この参照を保存することをお勧めします。
Gauris Javier

18

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

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に感謝します。実際には、ファンシーを感じる場合は、この1つのライナーも使用できますColor(int.parse('#000000'.replaceAll('#', '0xff')))
Alvin Konda


14

別の解決策があります。色を通常の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);

1
Flutterの「リーディングFF」が必要でしたThemeData
クリエイティブクリエーターまたは

私はこのソリューションが単純であることを気に入っていますが、@ creativecreatororが言及されていない可能性があるため、先頭のFFが依然として必要です。
KevinM

7

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に従ってください


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

簡単ですよね?

過給


4

"#b74093"?OK...

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

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


3

fromRGBコンストラクタに16進数を使用した明白な答えを逃しました:

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

1

Color Widgetをクリックすると、これらの文字の意味がより詳細に表示されます。Color.fromARGB()メソッドを使用して、カスタムカラーを作成することもできます。Flutter Doctorカラーピッカー Webサイトを使用して、フラッターアプリケーションに使用する色を選択します。


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

これがダウンしている理由がわからない、これは私のための解決策でした。
追加の手順を必要としない唯一の方法


0

このパッケージfrom_css_colorを使用Colorして、16進文字列から抜け出すことができます。3桁と6桁の両方のRGB 16進表記をサポートしています。

Color color = fromCSSColor('#ff00aa')

最適化のために、各色に対して一度Colorインスタンスを作成し、後で使用するためにどこかに保存します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.