【Flutter】ダイナミックカラーの実装方法【Material You】

Material You のダイナミックカラー、Flutterで実装するにはどうしたら良いんだろう?

本記事ではそんな疑問にお答えします。

Google の推奨するデザインの最新版、
Material You (Material 3) の目玉機能の一つである、
ユーザーの壁紙からキーとなる色を抽出し、
その色を基盤としたカラーテーマでアプリを構成する機能、ダイナミックカラーを、
Flutterで実装する方法について解説します。

壁紙を変えるとアプリ内の色も変わる、といったなんとも不思議な体験が味わえます。

ぜひ読んで体験してみてください！

本記事はこちらの記事を参考に構成しています。

Dynamically Theme Your Flutter App

As you know, Flutter recently dropped its major version update, i.e. Flutter 3.0. It brings a lot of changes and one of them I was waiting…

ダイナミックカラーとは
ダイナミックカラーの実装方法
まとめ
編集後記（2022/6/1）

ダイナミックカラーとは

ダイナミックカラーとは、ユーザーの壁紙からキーとなる色を抽出し、
その色を基盤としたカラーテーマでアプリを構成する機能のことです。

Google の推奨するデザインの最新版、
Material You (Material 3) の目玉機能の一つとなっています。

以下のGifがサンプルアプリによるダイナミックカラーの挙動となります。

壁紙の変更により、アプリ内の色が変わっていることを確認できます。

この機能はモバイルだとAndroid のみで利用可能です。
また、Android 12以上（エミュレータだと API 32以上）でないと反映されません。

ダイナミックカラーの実装方法

ここからは具体的な実装方法について解説していきます。

dynamic_color パッケージのインストール

ダイナミックカラーの機能はdynamic_color パッケージによって実装されます。

以下のコマンドをFlutter プロジェクトのルートで実行し、
dynamic_colorパッケージをインストールしてください。

flutter pub add dynamic_color

dynamic_color パッケージのインポート

MaterialApp を実装するファイルに、以下のimport文を追加してください。

import 'package:dynamic_color/dynamic_color.dart';

DynamicColorBuilder の用意

MaterialAppを以下のようにDynamicColorBuilderで囲います。

  @override
  Widget build(BuildContext context) {
    return DynamicColorBuilder(
      builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
        return MaterialApp(
          title: 'Flutter Demo',
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      },
    );
  }

lightDynamic, darkDynamicに、壁紙から取ってきて作成されたColorSchemeが設定されます。

端末がダイナミックカラーに対応していない場合、
これらのColorSchemeはnullとなります。

ダイナミックカラー非対応端末への対応

lightDynamic, darkDynamicがnull許容なのでこのままthemeに設定することができません。

以下のメソッドを用意して、
nullの時には予め設定したキーの色のColorSchemeとなるようにします。

ThemeData lightTheme(ColorScheme? lightColorScheme) {
  final scheme = lightColorScheme ??
      ColorScheme.fromSeed(seedColor: const Color(0xFFF47C7C));
  return ThemeData(
    colorScheme: scheme,
  );
}

ThemeData darkTheme(ColorScheme? darkColorScheme) {
  final scheme = darkColorScheme ??
      ColorScheme.fromSeed(
        seedColor: const Color(0xFFF47C7C),
        brightness: Brightness.dark,
      );
  return ThemeData(
    colorScheme: scheme,
  );
}

Themeの設定

上記メソッドを使ってダイナミックカラーのThemeを設定します。

  @override
  Widget build(BuildContext context) {
    return DynamicColorBuilder(
      builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: lightTheme(lightDynamic),
          darkTheme: darkTheme(darkDynamic),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      },
    );
  }

以上で設定は完了です。

対象の端末でアプリを実行してみてください。

壁紙によりアプリ内の色が変わる様子が確認できるはずです。