⛳
Flutter / ColorSchemeの設定方法
ColorSchemeはFlutterでよく使う色を管理するためのものです。
Themedataの設定はややこしいので開発の最初に済ませてしましょう！
使い方
1. ThemedataのcolorSchemeに色を設定
*必須プロパティの説明
ColorSchemeを設定する際、以下の11個のプロパティは必須となっているので説明を参考に設定してみましょう！
以下はプロパティの説明です。特にprimaryとonPrimaryの違い、surfaceの役割などはややこしいので気をつけましょう！
1.brightness
アプリに関する明るさを設定します。 例）light, dark
2.primary
アプリ内で一番多く使われるメインカラーを設定します。
3.onPrimary
primaryの上に配置されているコンポーネントの色を設定します。
以下の記事にprimaryとonPrimaryの違いが書かれていたので、ぜひ参考にしてみてください！
4.secondary
アクセントカラーで使う色を設定します。
5.onSecondary
onPrimaryと同様にsecondaryの上に設置されたコンポーネントに適用される色を設定します。
6.erorr
エラー発生時に表示するテキストの色を設定します。
7.onError
errorの上に設置されたコンポーネントに対する色を設定します。
8.background
背景に適用される色を設定します。
9.onBackground
背景の上に設置されたコンポーネントに対する色を設定します。
10.surface
Cardなどの特定のwidgetの背景に適用される色を設定します。
11.onSurface
surfaceの上に設置されたコンポーネントに対する色を設定します。
2.使いたい先のプロパティでcolorSchemeを指定する
以下のように使いたい先でcolorSchemeを指定します。
まとめ
ColorSchemeを使用する大きなメリットは以下の通りです。
- 複数部分の色を変更したい際にColorSchemeを変更するだけで済む
- 目的ごとに色を管理できるため、UIの統一感を保つことができる
Flutter開発をされている方の参考になると嬉しいです！
Discussion