[解決済み] Flutterで16進数の色文字列を使用するにはどうすればよいですか？

質問

を変換するにはどうすればよいですか？ 16進数の色文字列 のように #b74093 から Color をFlutterで使うのですか？

DartでHEXカラーコードを使いたいのですが、どうすればいいですか？

どのように解決するのですか？

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

を使用したい場合 不透明度のパーセンテージ値 を削除すると、最初の FF の値を この表 (他のカラーチャンネルでも動作します)。

拡張機能クラス

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

16進文字列を使用するデメリット

ここにある他の回答の多くは、動的に Color のように、16進文字列から作成します。しかし、この方法では、色が const .
理想的には、この回答の最初の部分で説明した方法で色を割り当てます。これは、Flutterウィジェットで通常行われる、色を大量にインスタンス化する場合に効率的です。