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

アプリケーション全体にテーマを設定するには、[MaterialApp](https://docs.flutter.io/flutter/material/MaterialApp-class.html) ルートウィジェットにして定義します。

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

### ThemeData

themeに [ThemeData](https://docs.flutter.io/flutter/material/ThemeData-class.html)を指定します。

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

ThemeDataには、名前付きコンストラクタに[ThemeData\.light](https://docs.flutter.io/flutter/material/ThemeData/ThemeData.light.html)と [ThemeData\.dark](https://docs.flutter.io/flutter/material/ThemeData/ThemeData.dark.html)が用意されてます。

- ThemeData\.light : プライムカラーがブルーのライトのテーマ

  ```dart
  new MaterialApp(
    theme: new ThemeData.light(),
  );
  ```

<img src="https://qiita-image-store.s3.amazonaws.com/0/12177/37a7c18f-7f70-ae82-e4e0-beb5da329fb4.png" width=50%>

- ThemeData.dark : アクセントカラーがティ－ルのダークのテーマ

  ```dart
  new MaterialApp(
    theme: new ThemeData.dark(),
  );
  ```

<img src="https://qiita-image-store.s3.amazonaws.com/0/12177/6d752709-b665-8752-26ae-c6a70f7092a6.png" width=50%>

- デフォルトの値をコピーして一部のプロパティだけを変更することもできます。

  ```dart
  new MaterialApp(
    theme: new ThemeData.light().copyWith(
      buttonColor: Colors.red,
      accentColor: Colors.green,
    ),
  );
  ```

<img src="https://qiita-image-store.s3.amazonaws.com/0/12177/3da54c4d-8f3b-56c5-d02c-216a297f774f.png" width=50%>

詳しいプロパティはドキュメントの[Properties](https://docs.flutter.io/flutter/material/ThemeData-class.html#instance-properties)を参照してください。

### primarySwatch

[ThemeData](https://docs.flutter.io/flutter/material/ThemeData-class.html)　のコンストラクタのプロパティには、primarySwatch が存在しますが、ドキュメントには記載がありません。exampleのデモアプリでも一部使われてます。

ソースコード [flutter/theme\_data\.dart](https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/theme_data.dart#L66) には以下の記載があります。

> 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](https://material.io/guidelines/style/color.html#color-color-palette)で、確認することが出来ます。

- カラーパレット Pinkを使用した例

  ```dart
  new MaterialApp(
    theme: new ThemeData(
      primarySwatch: Colors.pink,  //MaterialColor
    ),
  );
  ```

<img src="https://qiita-image-store.s3.amazonaws.com/0/12177/d2d65ba6-97dd-82b3-6590-c36a7b5e95ae.png" width=50%>

primarySwatch は [MaterialColor](https://docs.flutter.io/flutter/material/MaterialColor-class.html) を指定する必要があります。`const Color(0xFFE91E63)`の用にカラーを使用することは出来ません。

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

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

詳細は [primarySwatch](https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/theme_data.dart#L120-L177) のソースで、確認することができます。 

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

```dart
  // カラーパレット
  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](https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/gallery/theme.dart)