【Flutter】Colorクラスのコンストラクタに指定するHEXは8桁で

Flutterの materialライブラリには、標準で Colorクラスが実装されており、さまざまな色を最初から利用することができます。

ただしこれらはマテリアルデザイン準拠で設定された色コードであり、独自のUIデザイン構築のためには、標準で設定されていない色を管理したい場合があります。

ポイント

• HEXは8桁で表現してやる必要があるので注意

NG例

class ColorManager {
  static Color primary = Color("#DC143C");
  static Color secondary = Color("#FFC0CB");
}

• intでの指定が必要
• 6桁しか指定していない場合、先頭の2桁は0とみなされ、透明になってしまう

OK例

class ColorManager {
  static Color primary = Color(0xFFDC143C);
  static Color secondary = Color(0xFFFFC0CB);
}

参考

Color c1 = const Color(0xFFFFFF); // 完全な透明の白（不可視）。
Color c2 = const Color(0xFFFFFFFF); // 完全不透明な白 (可視)

サンプル

class ColorManager {
  static Color primary = HexColor.from("#DC143C"); // #DC143C
  static Color secondary = HexColor.from("#FFC0CB"); // #FFC0CB
}

extention HexColor on Color {
  static Color from(String hexString) {
    hexString = hexString.replaceAll("#", "");
    if (hexString.length == 6) {
      hexString = "FF" + hexString; // 不透明にする
    }
    return Color(int.parse(hexString, radix: 16)); 
  }
}

Colorクラスの拡張として、使いやすいHEX変換を実装した。

まとめ

• HEXは8桁で表現してやる必要があるので注意