[GetX] テーマ

2022-01-24 hit count image

FlutterでGetXを使ってテーマを使う方法について説明します。

外相

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

ブログシリーズ

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

GetXのインストール

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

flutter create theme

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

flutter pub add get

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

テーマの設定

GetXを使ってアプリのテーマを適用して変更するためにはGetMaterialAppthemedarkThemeを設定する必要があります。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(),
    );
  }
}

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

テーマ変更

このように設定したテーあを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モードで起動されたアプリを確認することができます。

Flutter - GetX theme

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

Flutter - GetX theme

設定可能なテーマ

次は私がアプリを開発しながら変更したテーマをまとめたものです。普通テーマを設定する時、全てのテーマを全部設定することができないので、次のように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の色

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

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,
  ),
  ...
);

完了

これでGetXでテーマを設定して変更する方法についてみてみました。また、私がアプリを開発しながら変更してみたテーマを共有しました。皆さんもGetXを使ってテーマを適用して、変更してみてください。私が変更しながったテーマの変更方法について知ってる方はコメントで共有してくれると嬉しいです。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts