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

flutter-logo

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

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

Color定義

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

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

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

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

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

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

UI側での利用方法

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です