web-dev-qa-db-ja.com

Flutterで16進数のカラー文字列を使用する方法

Flutterで#b74093のような16進数カラー文字列をColorに変換するにはどうすればよいですか？

colorsdartflutter
59
creativecreatorormaybenot

FlutterではColorクラスはのみを受け入れます整数パラメータとして、または名前付きコンストラクタを使用する可能性があります fromARGB および fromRGBO 。

そのため、文字列#b74093を整数値に変換するだけです。また、不透明度を常に指定する必要があることを尊重する必要があります。
255（full）不透明度は、16進値FFで表されます。これで既に0xFFが残ります。さて、色の文字列をこのように追加するだけです。

final color = const Color(0xffb74093);

文字は大文字でもそうでなくてもかまいません。

final color = const Color(0xFFB74093);
117
creativecreatorormaybenot

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
44
Jossef Harush

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

別の解決策があります。色を通常の16進数文字列として格納し、それに不透明度を追加したくない場合（先頭のFF）：1）16進数文字列を整数に変換する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);
9
Evgeny Kot

あなたの色が＃e41749の場合はちょうどそれの前に追加0xff

だからあなたはそれを書くことができます：

色：色（0xffe41749）。

2
abdallah mohamed

"#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;
}
2
Nahuel Alejandro Cabrera

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

1
Amit Prajapati

クラスを使用しない単純な関数：

Color _getColorFromHex(String hexColor) {
  hexColor = hexColor.replaceAll("#", "");
  return Color(int.parse('FF' + hexColor, radix: 16));
}

そして使用

Color color1 = _getColorFromHex("b74093");
Color color2 = _getColorFromHex("#b74093");
1
Alvin Konda
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')

1
watchdog0x

const appBackground = Color（0xffdf7599）;

df7599はあなたの色の16進コードです

0
Dcalsky

このように、16進数は052568 => 0xFF + 052568 => 0xFF052568です

問題は、カラー整数の上位バイトに含まれる不透明度が必要なことです。したがって、0xFF000000を追加する必要があります。

0
Oz87

あなたはカラーウィジェットをクリックすることができます、そしてそれはそれらの文字がどのように意味するかについてのより深い情報であなたに教えます。 Color.fromARGB（）メソッドを使ってカスタムカラーを作成することもできます。これは私にとってははるかに簡単です。あなたのフラッタアプリケーションに欲しい色を選ぶために Flutter Doctorカラーピッカー ウェブサイトを使ってください。

0
EyoelD