【Flutter】MyColorを定義して独自のカラーを上手に利用しよう！

こんにちは、イデアライブ FrontEndTeam の島野です。

開発の際に使用するcolorで独自のカラーを利用したい際に役立つMyColorについて、紹介します！

Color定義

下記のような形でアプリで使用するカラーをまとめていきます。

こちらに関しては新規でcolors.dartというファイルを作成し、使いたいカラーを記述していきます。

import 'dart:ui';

class MyColor {
  // 必要に応じて他のカラーも追加する
  static const Color darkgreen = Color(0xFF012B28);
  static const Color darkYellow = Color(0xFFEBB42C);
  static const Color black = Color(0xFF000000);
}

＊ファイルやクラス名に関しては独自のもので構いません。また、クラス名にはアッパーキャメルケースを利用しましょう！

カラーに関してですが、Flutterの場合Hex値をそのまま利用することができません。

そこで、0xFF ＋ Hex値の形式で定義することで、表すことができます。

static const Color darkgreen = Color(0xFF012B28);

このように、Colorタイプ　カラー名　= Color(0xFF ＋ Hex値)　でカラーを定義することができます。

UI側での利用方法

それでは実際に使っていきます！先ほど定義したことで、

 TextButton(
     child: Text(
        '新規登録はこちら',
         style: AppTextstyle.bold(
             fontSize: 12, color: MyColor.darkYellow),
      ),
      onPressed: () {
        context.pushNamed(RouteNames.signInPage);
        },
      ),

上記のAppTextstyleの引数colorで、利用することができます。

利用する際には、MyColor. + 定義したColor で記述します。

このように独自のカラーをクラスで管理しておくことで、コードがスッキリとした印象になり、

カラーの一括変更を行う際にもdarkYellowのカラーのHex値を変更するだけで済むためとてもおすすめの方法です。