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

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

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

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

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

ダイナミックカラーとは

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

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

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

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

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

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

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が設定されます。

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

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'),
        );
      },
    );
  }

以上で設定は完了です。

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

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

まとめ

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

いかがだったでしょうか？

今後、ダイナミックカラーに対応した端末はどんどん増えていくはずなので、
ぜひこの対応方法を覚えておき、いつでも対応できるよう準備してみてください。

本記事があなたのアプリ開発の一助となれば幸いです。

編集後記（2022/6/1）