Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
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

granoeste
Android and Flutter Developer
dena_coltd
    Delight and Impact the World
https://dena.com/jp/
Why not register and get more from Qiita?
  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