虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

Flutterで実行中にテーマを切り替える

f:id:superman199323:20181023234056p:plain

Flutterで実行中にテーマを切り替える

flutterでテーマをアプリ実行中に切り替える方法について説明します。

pubspec.ymlを編集する

テーマの変更は意外に簡単に実装できますが、今回は先人の知恵をお借りしたいと思います。 下記のGithubにかかれているソースコードを取得しにいくようにpubspec.ymlを編集します。

github.com

dependencies:
  flutter:
    sdk: flutter


  dynamic_theme:
      git:
        url: git://github.com/Norbert515/dynamic_theme.git

これで flutter packages get コマンドを実行すればライブラリがはいってきます。 GithubのURLが変わってしまったりすると flutter packages get が失敗して不安という方は、 dynamic_theme/lib/dynamic_theme.dart ファイルを自分のプロジェクトにいれてしまいましょう。

import文が少し変更になりますが、それでもちゃんと動きます。

実装

実装も簡単です。

初期値を設定する

DynamicTheme をルートにして実装しています。

void main() {
  runApp();
}

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return DynamicTheme(
      defaultBrightness: Brightness.light,
      data: (brightness) {
        return new ThemeData(
            brightness: Brightness.light,
            primaryColor: Colors.white
            accentColor: Colors.red,
            fontFamily: "HigashiOme");
      },
      themedWidgetBuilder: (context, theme) {
        return new MaterialApp(
          title: 'GroupSnap',
          theme: theme,
          debugShowCheckedModeBanner: false,
          routes: <String, WidgetBuilder>{
            '/': (_) => new Splash(),
          },
        );
      },
    );
  }
}

defaultBrightness: Brightness.light, を設定してデフォルトのテーマカラーを設定します。 data 属性の中で詳細なデータを書いていきます。

実行中にテーマを変更する処理を書く

次に実際に変更する処理を書いていきます。 基本的に実装はユーザーの行動(ボタンを押す、スイッチを変更する)などを行なったタイミングで下記を実行します。

DynamicTheme.of(context).setBrightness(Brightness.dark);

setBrightness の中に変更したいカラーテーマを設定します。

Brightness については下記に詳しく書かれています。 docs.flutter.io

ざっくりいうと、Brightness.light は白背景で文字の色は黒、 Brightness.dark は黒背景に文字の色は白背景となります。

参考として自分のアプリ(GroupAlbum)で実装されている実装を一部載せておきます。

Row(
  mainAxisAlignment: MainAxisAlignment.end,
     children: <Widget>[
        Text("ダークテーマを設定する"),
         Switch(
             value: _isDark,
              onChanged: (bool value) {
                 _onChange(value);
              },
          ),
       ],
),

  _onChange(bool value) async {
    await helper.getThemeColor();
    await helper.setThemeColor(value);
    DynamicTheme.of(context).setBrightness(value ?Brightness.dark : Brightness.light);
    setState(() {
      _isDark = value;
    });
  }

自分のアプリでは設定した色に対してフラグをローカルの情報としてキャッシュしています。 キャッシュしたデータから次回ユーザーがアプリを開いたときも設定されているテーマで変更できるように実装しています。

参考

自分は下記の記事とYoutube動画を参考に今回の実装をしているので、詳しくみたい方はこちらをどうぞ。

proandroiddev.com

www.youtube.com

宣伝

自分の開発しているGroupAlbumではテーマの変更に対応しています。(現在 2018/10/23 ではまだAppStore申請中です)

よろしければダウンロードの方よろしくお願いします。

www.shogogeek.com