Flutter で Material 3 (You) の Dynamic Color を使う

この記事で出来ること

はじめに

Material 3 には、壁紙に応じてアプリ内の配色を変更する Dynamic Color という仕組みがあります。Flutterにも Dynamic Color を扱うための dynamic_color というパッケージがあるので、その使い方を解説します。

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

flutter pub add dynamic_color

実装

MaterialApp を DynamicColorBuilder でラップするように書きます。

DynamicColorBuilder の builder プロパティは、lightモードのカラースキームとdarkモードのカラースキームを引数として渡されるので、それを ThemeData クラスのコンストラクタ引数に渡してあげればOKです。

簡単ですね👍

main.dart

import 'package:dynamic_color/dynamic_color.dart';
import 'package:dynamic_color_example/home_screen.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const DynamicColorExampleApp());
}

class DynamicColorExampleApp extends StatelessWidget {
  const DynamicColorExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return DynamicColorBuilder(
      builder: (lightColorScheme, darkColorScheme) => MaterialApp(
        title: 'Dynamic Color Example',
        theme: _buildTheme(Brightness.light, lightColorScheme),
        darkTheme: _buildTheme(Brightness.dark, darkColorScheme),
        home: const HomeScreen(),
      ),
    );
  }
}

ThemeData _buildTheme(Brightness brightness, ColorScheme? colorScheme) {
  return ThemeData(
    useMaterial3: true,
    brightness: brightness,
    colorScheme: colorScheme,
  );
}

サポート状況

2023/3/20 現在、以下の4つのプラットフォームがサポートされています。

• Android S+: color from user wallpaper
• Linux: GTK+ theme's @theme_selected_bg_color
• macOS: app accent color
• Windows: accent color or window/glass color

iOSはこの一覧に入っていないので上記のコードをビルド・実行すると紫色をベースにした配色で固定されるようです。

完全なソースコード

https://github.com/intoffset/flutter_examples/tree/main/dynamic_color_example