Help us understand the problem. What is going on with this article?

Flutter アプリテーマのカスタマイズ

More than 1 year has passed since last update.

アプリケーション全体にテーマを設定するには、MaterialApp ルートウィジェットにして定義します。

new MaterialApp(
  theme: /*UserThemeData*/
);

ThemeData

themeに ThemeDataを指定します。

new MaterialApp(
  theme: new ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],
  ),
);

ThemeDataには、名前付きコンストラクタにThemeData.lightThemeData.darkが用意されてます。

  • ThemeData.light : プライムカラーがブルーのライトのテーマ
  new MaterialApp(
    theme: new ThemeData.light(),
  );

  • ThemeData.dark : アクセントカラーがティ-ルのダークのテーマ
  new MaterialApp(
    theme: new ThemeData.dark(),
  );

  • デフォルトの値をコピーして一部のプロパティだけを変更することもできます。
  new MaterialApp(
    theme: new ThemeData.light().copyWith(
      buttonColor: Colors.red,
      accentColor: Colors.green,
    ),
  );

詳しいプロパティはドキュメントのPropertiesを参照してください。

primarySwatch

ThemeData のコンストラクタのプロパティには、primarySwatch が存在しますが、ドキュメントには記載がありません。exampleのデモアプリでも一部使われてます。

ソースコード flutter/theme_data.dart には以下の記載があります。

The primary color palette (the [primarySwatch]), chosen from one of the swatches defined by the material design spec.

(Google翻訳)
原色パレット([primarySwatch])は、マテリアルデザイン仕様で定義されたスウォッチの1つから選択します。

*スウォッチ(swatch)とは、材料見本のことのようです。

マテリアルデザイン仕様で定義されたカラーパレットは、Color - Style - Material Designで、確認することが出来ます。

  • カラーパレット Pinkを使用した例
  new MaterialApp(
    theme: new ThemeData(
      primarySwatch: Colors.pink,  //MaterialColor
    ),
  );

primarySwatch は MaterialColor を指定する必要があります。const Color(0xFFE91E63)の用にカラーを使用することは出来ません。

MaterialColorは、1つの色と10の色合いの色見本を定義します。
色の濃淡はインデックスで参照されます。 インデックスが大きいほど、色が濃くなります。 50、100、200、...、900の10個定義します。500が基本カラーになります。

ThemeData は、primarySwatch に指定されたカラーパレットを使って、各プロパティを設定してくれます。

詳細は primarySwatch のソースで、確認することができます。

カラーパレットは、カスタムで作成することも出来ます。

  // カラーパレット
  const int _kPurplePrimaryValue = 0xFF6200EE;
  const MaterialColor _kPurpleSwatch = const MaterialColor(
    _kPurplePrimaryValue,
    const <int, Color> {
      50: const Color(0xFFF2E7FE),
      100: const Color(0xFFD7B7FD),
      200: const Color(0xFFBB86FC),
      300: const Color(0xFF9E55FC),
      400: const Color(0xFF7F22FD),
      500: const Color(_kPurplePrimaryValue),
      700: const Color(0xFF3700B3),
      800: const Color(0xFF270096),
      900: const Color(0xFF190078),
    }
  );

  new MaterialApp(
    theme: new ThemeData(
      primarySwatch: _kPurpleSwatch // カスタムカラーパレットを指定
    ),
  );

まとめると、アプリテーマのカスタマイズには以下の方法があります。
- new ThemeData(/* プロパティ /)で、個々のプロパティを指定して作成する。
- new ThemeData.light() or new ThemeData.dark() で、デフォルトテーマを使用する。
- new ThemeData(primarySwatch: Colors.pink) で、カラーパレットから作成する。
- new ThemeData().copyWith(/
プロパティ */)で、デフォルトのプロパティを一部変更して作成する。

もっと詳細な事例は Flutter の example を見ることをおすすめします。
flutter/theme.dart at master · flutter/flutter

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away