Flutter / ColorSchemeの設定方法

ColorSchemeはFlutterでよく使う色を管理するためのものです。
Themedataの設定はややこしいので開発の最初に済ませてしましょう！

使い方

1. ThemedataのcolorSchemeに色を設定

*必須プロパティの説明

ColorSchemeを設定する際、以下の11個のプロパティは必須となっているので説明を参考に設定してみましょう！

以下はプロパティの説明です。特にprimaryとonPrimaryの違い、surfaceの役割などはややこしいので気をつけましょう！

1.brightness

アプリに関する明るさを設定します。　例）light, dark

2.primary

アプリ内で一番多く使われるメインカラーを設定します。

3.onPrimary

primaryの上に配置されているコンポーネントの色を設定します。
以下の記事にprimaryとonPrimaryの違いが書かれていたので、ぜひ参考にしてみてください！
https://stackoverflow.com/questions/71099664/what-is-difference-between-primary-and-onprimary-properties-in-colorscheme-flutt

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開発をされている方の参考になると嬉しいです！