[Flutter] Theme を知ろう

2023年4月18日2023年6月12日

FlutterのThemeは、アプリケーション全体で使用するデザインやカラーパレット、テキストスタイルなどを定義するための機能です。これにより、アプリケーション全体のデザインを一元管理し、簡単に変更することができます。

使い方

まずは簡単な例から。新しいFlutterプロジェクトを作成します。次に、lib/main.dartファイルを開き、以下のように変更します。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
    );
  }
}

上記のコードでは、MaterialAppウィジェットのthemeプロパティにThemeDataオブジェクトを渡しています。このThemeDataオブジェクトには、primarySwatchとvisualDensityという2つのプロパティが定義されています。primarySwatchは、アプリケーション全体で使用する色のテーマを設定するために使用されます。visualDensityは、アプリケーションのレイアウトの密度を設定するために使用されます。

また、MyHomePageウィジェットのテキストスタイルは、Theme.of(context).textTheme.headline4を使用して、アプリケーションのテーマから取得されます。

テーマを変更してみる

次に、アプリケーションのテーマを変更する方法を見てみましょう。上記のコードで、primarySwatchをColors.blueに設定しています。この場合、アプリケーション全体で使用される主な色が青になります。このprimarySwatchプロパティを変更することで、アプリケーションの色を変更することができます。例えば、以下のようにすることができます。

theme: ThemeData(
  primarySwatch: Colors.red,
  visualDensity: VisualDensity.adaptivePlatformDensity,
),

この場合、アプリケーションの主な色は赤になります。

Theme を定義する

テーマはカスタマイズすることもできます。たとえば、次のように、自分で新しいテーマを定義して、それを使用することができます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

final myTheme = ThemeData(
  primarySwatch: Colors.red,
  visualDensity: VisualDensity.adaptivePlatformDensity,
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      theme: myTheme,
      home: MyHomePage(title: 'Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: Theme.of(context).textTheme.headlineLarge,
        ),
      ),
    );
  }
}

Themeのデフォルト値を変更することで、コンポーネント全体の見た目を変更することができます。また、FlutterにはMaterial DesignやCupertino Designなどのデザインガイドラインがあり、これらを使用することで、一貫性のあるアプリケーションを作成することができます。

Theme のプロパティ

また、テーマには他にも多くのプロパティがあり、それぞれ異なる設定をすることが可能です。以下は、よく使われるテーマのプロパティとその意味です。

brightness：テーマの明るさを設定します。明るいテーマと暗いテーマの2つの値を持ちます。通常、明るいテーマは白背景で、暗いテーマは黒背景で設定されます。
primaryColor：アプリケーションのプライマリカラーを設定します。通常、アプリケーションのトップバーの背景色やボタンの色などに使用されます。
accentColor：アプリケーションのアクセントカラーを設定します。通常、ボタンやアイコンの背景色、選択された項目の背景色などに使用されます。
fontFamily：アプリケーションのフォントファミリーを設定します。通常、タイトル、本文、ボタンなどのテキストに使用されます。
textTheme：アプリケーションのテキストスタイルを設定します。通常、タイトル、サブタイトル、本文、キャプションなどに使用されます。テキストスタイルには、フォントサイズ、フォントウェイト、カラーなどが含まれます。
scaffoldBackgroundColor：スキャフォールドの背景色を設定します。通常、アプリケーションの背景色に使用されます。
cardTheme：カードのテーマを設定します。通常、カードの背景色、影、角丸などに使用されます。
inputDecorationTheme：フォームの入力欄のテーマを設定します。通常、入力欄の背景色、境界線、フォントサイズなどに使用されます。
buttonTheme：ボタンのテーマを設定します。通常、ボタンの背景色、フォントサイズ、角丸などに使用されます。
tabBarTheme：タブバーのテーマを設定します。通常、タブの背景色、選択されたタブの背景色、テキストスタイルなどに使用されます。

これらのプロパティを使用して、アプリケーションの見た目を変更することができます。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！