Open13

Design of Flutter

ピン留めされたアイテム
yorifujiyorifuji

ThemeDataでのcolorの設定パターン

colorSchemeSeed

単一の色から Material 3 のカラースキームを自動生成したい場合に使用します
より簡単に一貫したテーマを作成できます
Material 3 (Material You) のデザイン言語を活用したい場合に最適です
ThemeData.from(colorScheme: ColorScheme.fromSeed(seedColor: myColor))の短縮形です

colorScheme

カラースキームをより細かく制御したい場合に使用します
すべての色を自分で指定したい場合に適しています
カスタムブランディングに適しており、より細かい調整が可能です

  • ColorScheme.fromSeed
  • ColorScheme.fromSwatch

非推奨

  • primarySwatch
  • primaryColor
yorifujiyorifuji

以下は等価

    return ThemeData(
      useMaterial3: true,
      brightness: Brightness.dark,
      colorSchemeSeed: Colors.indigo,
    );

    return ThemeData.dark(useMaterial3: true).copyWith(
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.indigo,
        brightness: Brightness.dark,
      ),
    );

理由

    if (colorSchemeSeed != null || useMaterial3) {
      if (colorSchemeSeed != null) {
        colorScheme = ColorScheme.fromSeed(seedColor: colorSchemeSeed, brightness: effectiveBrightness);
      }
yorifujiyorifuji

colorSchemeSeedを指定した時の色の作られ方

class ThemeData with Diagnosticable {
  factory ThemeData({
...
    if (colorSchemeSeed != null || useMaterial3) {
      if (colorSchemeSeed != null) {
        colorScheme = ColorScheme.fromSeed(seedColor: colorSchemeSeed, brightness: effectiveBrightness);
      }

factory ColorScheme.fromSeed({
    required Color seedColor,
    Brightness brightness = Brightness.light,
    Color? primary,
...
  }) {
    final Scheme scheme;
    switch (brightness) {
      case Brightness.light:
        scheme = Scheme.light(seedColor.value);
      case Brightness.dark:
        scheme = Scheme.dark(seedColor.value);
    }
    return ColorScheme(
      primary: primary ?? Color(scheme.primary),

  static Scheme light(int color) => lightFromCorePalette(CorePalette.of(color));

  static Scheme lightFromCorePalette(CorePalette palette) => Scheme(
        primary: palette.primary.get(40),
        onPrimary: palette.primary.get(100),
        primaryContainer: palette.primary.get(90),
        onPrimaryContainer: palette.primary.get(10),
        secondary: palette.secondary.get(40),
        onSecondary: palette.secondary.get(100),
        secondaryContainer: palette.secondary.get(90),
        onSecondaryContainer: palette.secondary.get(10),
        tertiary: palette.tertiary.get(40),
        onTertiary: palette.tertiary.get(100),
        tertiaryContainer: palette.tertiary.get(90),
        onTertiaryContainer: palette.tertiary.get(10),
        error: palette.error.get(40),
        onError: palette.error.get(100),
        errorContainer: palette.error.get(90),
        onErrorContainer: palette.error.get(10),
        background: palette.neutral.get(99),
        onBackground: palette.neutral.get(10),
        surface: palette.neutral.get(99),
        onSurface: palette.neutral.get(10),
        surfaceVariant: palette.neutralVariant.get(90),
        onSurfaceVariant: palette.neutralVariant.get(30),
        outline: palette.neutralVariant.get(50),
        outlineVariant: palette.neutralVariant.get(80),
        shadow: palette.neutral.get(0),
        scrim: palette.neutral.get(0),
        inverseSurface: palette.neutral.get(20),
        inverseOnSurface: palette.neutral.get(95),
        inversePrimary: palette.primary.get(80),
      );