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

Log in to Qiita Team
OrganizationAdvent CalendarQiitadon (β)
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*/


themeに ThemeDataを指定します。

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


  • 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,



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.



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

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

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

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

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

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


  // カラーパレット
  const int _kPurplePrimaryValue = 0xFF6200EE;
  const MaterialColor _kPurpleSwatch = const MaterialColor(
    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

Android and Flutter Developer
    Delight and Impact the World
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