🎨

DynamicSchemeVariantって何？

2025/04/29に公開

 DynamicSchemeVariantって何？ColorSchemeで作られるカラーパレットの色を調整するための設定です。

Flutter 3.22で追加されました。
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.from(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.purple,
          dynamicSchemeVariant: DynamicSchemeVariant.tonalSpot, // これ！ここで設定！
        ),
      ),
      home: const HomeScreen(),
    );
  }
}
これにより、鮮やかな色のカラーパレットや、モノクロのカラーパレットを作ることができます。

アプリのコンセプトに合わせて色調を変えることができるようになりました🎉

 どんな種類があるの？以下の9種類用意されています。
tonalSpot
fidelity
monochrome
neutral
vibrant
expressive
content
rainbow
fruitSalad
それぞれどんなカラーパレットができるか、比較してみましょう。
seedはColors.purpleを使用します。

画像の色一覧は、Flutterのサンプルのコードを基にしています。

 tonalSpotDefault for Material theme colors. Builds pastel palettes with a low chroma.

Materialテーマカラーのデフォルト。彩度の低いパステル調のパレットを構築する。

（公式ドキュメントより）
何も設定しないと、tonalSpotになります。くすんだ色味のパレットです。


 fidelityThe resulting color palettes match seed color, even if the seed color is very bright (high chroma).

結果として得られるカラーパレットは、シードカラーが非常に明るい（彩度が高い）場合でも、シードカラーと一致する。

（公式ドキュメントより）
seedで選択したカラーがそのままPrimary Containerの色になります。

TertiaryがPrimaryやSecondaryと離れた色相になります。

アクセント色が欲しい時に使いやすそうです。


 monochromeAll colors are grayscale, no chroma.

すべての色はグレースケールで、彩度はない。

（公式ドキュメントより）
モノクロのカラーパレットです。seedにどんな色を設定しても画像のカラーパレットになります。


 neutralClose to grayscale, a hint of chroma.

グレースケールに近く、彩度がほのかにある。

（公式ドキュメントより）
うっすらseedの色味が感じられる灰色みの強いカラーパレットです。

Primary、Secondary、Tertiaryは似た色相です。


 vibrantPastel colors, high chroma palettes. The primary palette's chroma is at maximum. Use fidelity instead if tokens should alter their tone to match the palette vibrancy.

パステルカラー、高彩度パレット。プライマリパレットの彩度は最大です。トークンがパレットの鮮やかさに合わせて色調を変更する必要がある場合は、代わりに fidelity を使用してください。

（公式ドキュメントより）
tonalSpotよりは鮮やかな色ですが、fidelityよりはくすんだ色になります。

TertiaryはPrimaryやSecondaryに近い色相です。


 expressivePastel colors, medium chroma palettes. The primary palette's hue is different from the seed color, for variety.

パステルカラー、中彩度パレット。プライマリーパレットの色相はシードカラーとは異なり、バラエティに富んでいる。

（公式ドキュメントより）
Primary、Secondary、Tertiaryがseedで選んだ色相とまったく異なる色になります。

癖の強いパレットで、どこで使うの！？と思いました。


 contentAlmost identical to fidelity. Tokens and palettes match the seed color. ColorScheme.primaryContainer is the seed color, adjusted to ensure contrast with surfaces. The tertiary palette is analogue of the seed color.

fidelityとほぼ同じ。トークンとパレットはシードカラーと一致する。ColorScheme.primaryContainerは、surfaceとのコントラストを確保するために調整されたシードカラーです。Tertiaryパレットはシードカラーの類似色。

（公式ドキュメントより）
fidelityと同様、Primary Containerの色はseedの色ですが、Tertiaryは、Primaryなどと少し近い色相になります。

鮮やかで色に統一感のあるパレットです。


 rainbowA playful theme - the seed color's hue does not appear in the theme.

遊び心のあるテーマ - シードカラーの色合いはテーマには登場しない。

（公式ドキュメントより）
seedの色相は使われないと書かれていますが、tonalSpotと全く同じ色に見えるので、

rainbow自体が機能していなさそうです…。

直ったら更新します！


 fruitSaladA playful theme - the seed color's hue does not appear in the theme.

遊び心のあるテーマ - シードカラーの色合いはテーマには登場しない。

（公式ドキュメントより）
Tertiaryはseedの色に近そうです。PrimaryとSecondaryはseedと異なる色相になります。

正直、expressiveの方が遊び心あり過ぎでは…？


 様々な色でパレットを作ってみる一色だと、どんなパレットができるか想像がつきにくいので、様々な色で9種類のパレットを作って比較してみました。

 Colors.purple

 Colors.orange

 Colors.blue

 Colors.lightBlue

 Colors.brown

 #DDCBFE（薄い紫色）

 #0E1546（暗い青色）

 さいごに個人的には、元のカラーパレットはおとなしい色だなと思っていたので、鮮やかな色の選択肢が増えて嬉しいです。

ちょっと開発を楽しむだけの身だと、全ての色を手動で設定するのは大変なので…。
色選びの参考になれば嬉しいです！

 引用元
公式ドキュメント
翻訳はDeepLを元に少し整えています。