こんにちは、イデアライブ FrontEndTeam の島野です。
開発の際に使用するcolorで独自のカラーを利用したい際に役立つMyColorについて、紹介します！
Color定義
下記のような形でアプリで使用するカラーをまとめていきます。
こちらに関しては新規でcolors.dartというファイルを作成し、使いたいカラーを記述していきます。
|
1 2 3 4 5 6 7 8 |
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値の形式で定義することで、表すことができます。
|
1 |
static const Color darkgreen = Color(0xFF012B28); |
このように、Colorタイプ カラー名 = Color(0xFF ＋ Hex値) でカラーを定義することができます。
UI側での利用方法
それでは実際に使っていきます！先ほど定義したことで、
|
1 2 3 4 5 6 7 8 9 10 |
TextButton( child: Text( '新規登録はこちら', style: AppTextstyle.bold( fontSize: 12, color: MyColor.darkYellow), ), onPressed: () { context.pushNamed(RouteNames.signInPage); }, ), |
上記のAppTextstyleの引数colorで、利用することができます。
利用する際には、MyColor. + 定義したColor で記述します。
このように独自のカラーをクラスで管理しておくことで、コードがスッキリとした印象になり、
カラーの一括変更を行う際にもdarkYellowのカラーのHex値を変更するだけで済むためとてもおすすめの方法です。