Flutter-ColorScheme

ColorSchemeで設定されている色についての覚書みたいなもの。

ColorScheme

マテリアル2の色、マテリアル3の色で定義されている色に関してメソッドで取り出せるようにしてあるもの。

Primary

ベースとなる色味で、目立たせるもの全般に使用される。
入力系ウィジェットでは大体使っているのではないかな。

Secondary

Primaryよりは目立たせたくないよう部品に使用する。
SurfaceやOutlineに表記を合わせるのなら、Primary Variantというくくりになるのかな。

Primaryの派生みたいなもの。

Tertiary

3次色。
Primary、Secondaryではなさそうな部品や入力フィールドなど、もしくは逆に注視させたいものに使用する。

Tertiaryは実装者が独自ルールを定義して利用してもいいらしい。

Primaryの派生みたいなもの。

Surface/Surface Variant/Surface Tint

入力用の部品ではない背景や他の領域と区別するために使用される領域に使用する色合い。

Primary系列とは異なり、色味（役割）別にSurfaceの後ろに単語が付く。

• 無印
• Variant
  無印と区別するためのバリエーションの一つ
  例えばSliderの非選択領域の棒の色など。
  基本的に背景が無印なので、それと色を変えるために使用しているっポイ。
• Tint
  Elevation領域の色味で、実装上Primaryと同じ色を使用するケースが多いみたい

実際に使うのはSurfaceかSurface variantなのだろう。

Outline/Outline Variant

境界線の色。
Variantは控えめな境界色といった感じか。

Materialの仕様書にはdividerに使われていると書かれている。

Error

エラーではないかと思われる部分に使われる色味。

コンテナの仕様書見るとバッジで使用されているようだ。

Scrim

結構謎なもの。

Materialの資料によるとダイアログを表示した時のバリアー部分の色味のようだ。

分かりずらいけど、下の赤枠で囲まれた部分の色。

しかしFlutterのshowDialogの実装中ではColors.black54がハードコードされている。
またScrimをFlutterのリポジトリで検索しても使用している箇所は検索できなかった。

実際には使われていないらしい。

flutterのissuesを見てもわからなかった。

Container系

Primary系列、Errorに付属した形で用意されているもの。

Primary系/ Error系ともに無印の物よりは控えめ、低優先順位の場所に使うらしい。

Surface系はMaterialの資料には書かれているのだけど用意されていない。

Issuesには上げられている。

Inverse Surface/ Inverse Primary

まずInverse Surfaceがある。

これはSnack barなど通常のSurfaceの上に表示されるウィジェットに使用し、他の部分より強調させたい領域として使用する。

Inverse PrimaryはInverse Surfaceの上に配置する入力ウィジェット類に使用するもの。

Background

スクロール可能領域の背景色として使われるようだなのだけど、Material3の仕様を見る限りLegacyな指定でSurfaceを使ってくれということらしい。

Baseline color scheme tokens

On～系

Primary系、Surface系、Error系それぞれに用意されていて、該当する色味の前景色(文字色、アイコン色)として使用される色。

Shadow

Elevation部分の色合い。

定義はされているのだけど、自前のアプリケーションで特別指定して使用することはないだろうと思われる。

バグ？

ダークモードを使ってて、設定と異なる色になっていたのがあった。

Material2モードのonPrimary。

仕様では#000000なのに#FFFFFFになっていた。

こちらFlutter-issueはprimaryTextThemeの色なのだけど、基本は同じっぽい。
ダークモードがそれほど使われていないのだろうか。

現在はMaterial3推奨になったようなので、修正はされないのだろうな。