本記事ではそんな疑問にお答えします。
Google の推奨するデザインの最新版、 Material You (Material 3) の目玉機能の一つである、 ユーザーの壁紙からキーとなる色を抽出し、 その色を基盤としたカラーテーマでアプリを構成する機能、ダイナミックカラーを、 Flutterで実装する方法について解説します。
壁紙を変えるとアプリ内の色も変わる、といったなんとも不思議な体験が味わえます。
ぜひ読んで体験してみてください！
本記事はこちらの記事を参考に構成しています。
ダイナミックカラーとは
ダイナミックカラーとは、ユーザーの壁紙からキーとなる色を抽出し、 その色を基盤としたカラーテーマでアプリを構成する機能のことです。
Google の推奨するデザインの最新版、 Material You (Material 3) の目玉機能の一つとなっています。
以下のGifがサンプルアプリによるダイナミックカラーの挙動となります。
壁紙の変更により、アプリ内の色が変わっていることを確認できます。
この機能はモバイルだとAndroid のみで利用可能です。 また、Android 12以上（エミュレータだと API 32以上）でないと反映されません。
ダイナミックカラーの実装方法
ここからは具体的な実装方法について解説していきます。
dynamic_color パッケージのインストール
ダイナミックカラーの機能はdynamic_color パッケージによって実装されます。
以下のコマンドをFlutter プロジェクトのルートで実行し、 dynamic_colorパッケージをインストールしてください。
flutter pub add dynamic_colordynamic_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'),
);
},
);
}以上で設定は完了です。
対象の端末でアプリを実行してみてください。
壁紙によりアプリ内の色が変わる様子が確認できるはずです。
まとめ
Google の推奨するデザインの最新版、 Material You (Material 3) の目玉機能の一つである、 ユーザーの壁紙からキーとなる色を抽出し、 その色を基盤としたカラーテーマでアプリを構成する機能、ダイナミックカラーを、 Flutterで実装する方法について解説しました。
いかがだったでしょうか？
今後、ダイナミックカラーに対応した端末はどんどん増えていくはずなので、 ぜひこの対応方法を覚えておき、いつでも対応できるよう準備してみてください。
本記事があなたのアプリ開発の一助となれば幸いです。
Flutterを一緒に学んでみませんか？ Flutter エンジニアに特化した学習コミュニティ、Flutter大学への入会は、 以下の画像リンクから。
編集後記（2022/6/1）
ダイナミックカラーについての記事でした。
アプリの色が、壁紙によって変わるなんて、なんだか不思議な気がしますよね。
壁紙の色を取得できることを利用して、 何らかの形でアプリを作れると、面白いかもしれません。
iOSでもこのような機能が追加されるんでしょうか？ 楽しみですね。
今後のMaterial Designの進化にも期待しています。
週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。 記事の更新情報はFlutter大学Twitterにて告知します。
