[GetX] テーマ

外相

今回のブログポストではGetXを使ってテーマ(Theme)を使う方法について説明します。このブログポストで紹介するソースコードは下記のリンクで確認できます。

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/getx/theme

ブログシリーズ

このブログポストはFlutterでGetXを使う方法についてシリーズとしてまとめています。GetXの他の使い方については下記のリンクを参考してください。

GetXのインストール

FlutterでGetXの使い方を確認するため次のコマンドを実行してFlutterの新しいプロジェクトを生成します。

flutter create theme

その後次のコマンドを実行してGetXパッケージをインストールします。

flutter pub add get

このようにインストールしたGetXを使ってテーマを使う方法について説明します。

テーマの設定

GetXを使ってアプリのテーマを適用して変更するためにはGetMaterialAppにthemeとdarkThemeを設定する必要があります。lib/main.dartファイルを開いて下記のように修正します。

import 'package:get/get.dart';

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      darkTheme: ThemeData.dark().copyWith(primaryColor: Colors.red),
      home: const MyHomePage(),
    );
  }
}

ここで設定したthemeはlightモードで表示されるテーマで、darkThemeはdarkモードで表示されるテーマです。自分のアプリに合わせて各テーマを作って設定します。

テーマ変更

このように設定したテーあをGetXを使って変更することができます。テーマを変更する時には次のようにGet.changeTheme関数を使います。

Get.changeTheme(ThemeData.dark());

テーマを確認する

GetXのGet.isDarkModeを使って現在のテーマがダークモードかどうかを確認することができます。これをテーマを変更する時、活用することができます。

Get.changeTheme(
  Get.isDarkMode ? ThemeData.light() : ThemeData.dark(),
);

デバイス設定を取得する

普通アプリを最初起動したらデバイスのテーマに合わせてアプリのテーマを設定します。Flutterでは次のように現在デバイスのテーマの設定を取得することができます。

import 'package:flutter/scheduler.dart';
...
final isLight = SchedulerBinding.instance?.window.platformBrightness == Brightness.light;

これを活用すると、アプリを始めて起動した時、デバイスのテーマに合わせてアプリのテーマを設定することができます。

例題

今までの内容を確認するためlib/main.dartファイルを次のように修正します。

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: Get.isDarkMode
            ? SystemUiOverlayStyle.light
            : SystemUiOverlayStyle.dark,
        title: Text(
          Get.isDarkMode ? 'Dark Theme' : 'Light Theme',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
      body: Center(
        child: OutlinedButton(
          onPressed: () {
            Get.changeTheme(
              Get.isDarkMode ? ThemeData.light() : ThemeData.dark(),
            );
          },
          child: const Text('Change Theme'),
        ),
      ),
    );
  }
}

これを実行すると次のようにLightモードで起動されたアプリを確認することができます。

次は画面い表示されたボタンを押すと、次のようにDarkモードでテーマが変更されることが確認できます。

設定可能なテーマ

次は私がアプリを開発しながら変更したテーマをまとめたものです。普通テーマを設定する時、全てのテーマを全部設定することができないので、次のようにFlutterが提供する基本テーマをコピーして使います。

final themeData = Get.isDarkMode ? ThemeData.dark() : ThemeData.light();
...
themeData.copyWith(
  ...
);

AppBarのテーマ

次のようにAppBarの文字とアイコンの色を設定することができます。

themeData.copyWith(
  ...
  appBarTheme: AppBarTheme(
    color: white,
    titleTextStyle: TextStyle(color: black),
    iconTheme: IconThemeData(color: black),
  ),
  ...
);

Scaffoldのバックグラウンドカラー

次のようにScaffoldの背景を設定することができます。

themeData.copyWith(
  ...
  scaffoldBackgroundColor: white,
  ...
);

PrimaryとSecondaryの色

次のようにPrimaryとSecondaryの色を設定することができます。

themeData.copyWith(
  ...
  primaryColor: black,
  colorScheme: themeData.colorScheme.copyWith(
    primary: black,
    secondary: black,
  ),
  ...
);

テキストテーマ

次のようにFlutterで表示されるテキストの基本テーマを設定することができます。

final textStyle = TextStyle(color: black);
final textTheme = TextTheme(
  headline1: textStyle,
  headline2: textStyle,
  headline3: textStyle,
  headline4: textStyle,
  headline5: textStyle,
  headline6: textStyle,
  subtitle1: textStyle,
  subtitle2: textStyle,
  bodyText1: textStyle,
  bodyText2: textStyle,
  caption: textStyle,
  button: textStyle,
  overline: textStyle,
);

themeData.copyWith(
  ...
  textTheme: textTheme,
  primaryTextTheme: textTheme,
  ...
);

Dividerの色

次のようにDividerの色を設定することができます。

themeData.copyWith(
  ...
  dividerColor: lightGray,
  ...
);

アイコンのテーマ

次のようにアイコンのテーマを設定することができます。

themeData.copyWith(
  ...
  iconTheme: iconTheme,
  primaryIconTheme: iconTheme,
  ...
);

TextButtonのテーマ

次のようにTextButtonのテーマを設定することができます。

themeData.copyWith(
  ...
  textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(primary: black),
  ),
  ...
);

OutlinedButtonのテーマ

次のようにOutlinedButtonのテーマを設定することができます。

themeData.copyWith(
  ...
  outlinedButtonTheme: OutlinedButtonThemeData(
    style: TextButton.styleFrom(
      primary: black,
      side: BorderSide(color: black, width: 1),
    ),
  ),
  ...
);

TextFieldの選択エリアテーマ

次のようにTextFieldの選択エリアのテーマを設定することができます。

themeData.copyWith(
  ...
  textSelectionTheme: TextSelectionThemeData(
    cursorColor: Constants.black,
    selectionColor: Colors.blue.shade200,
  ),
  ...
);