【Flutter】ThemeData.adaptations についてサクッと説明するよ

Dart

2024.09.05 2024.03.25

概要

どうも、@daiki1003です！

みなさん、ご存知の通りFlutterにはThemeDataがあります。

ThemeDataにはそれはもうたくさんのプロパティがあって、多分全部理解してる人はそう多くないはずです。

【Flutter解体新書 vol.3】ThemeData編 (頑張った...)

みなさまお久しぶりです！解体新書vol.3を久しぶりに公開したいと思います！ vol.1, 2はこちら。なお、この記事はFlutter Advent Calendar 2022、3日目の記事となりま...

ちなみに、以前こんなブログも認めて(したためて)いるので、もしまだご覧になっていない方いらっしゃいましたら是非に。

そして、そんな複雑なThemeDataにList<Adaptation<Object>> adaptationsというプロパティが追加されたのをご存知ですか？
本記事では、このadaptationsについてサクッと解説していこうと思います。

それではいってみましょー！

執筆時環境

名前	バージョン
Flutter	3.19.2
Dart	3.3.0

筆者環境

Switch.adaptive

突然ですが、Switch.adaptiveコンストラクタをご存知でしょうか？

こんな感じで各OSフレンドリーなSwitchを表示することができる優れものです。

ですが、ちょっとだけ困ったことがあります。

見た目このままに、着色はしたい事って結構あるんですよ。
特にアプリのテーマとかに沿って。

では、テーマを指定していきましょう。

ThemeData(
  ...
  switchTheme: SwitchThemeData(
    thumbColor: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.selected)) {
        return Colors.white;
      }
      return null;
    }),
    trackColor: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.selected)) {
        return Colors.amber;
      }
      return null;
    }),
  ),
)

えー、見事なまでにガン無視なんですけど。

もう我々は諦めるしかないのでしょうか。

いいえ、そんなことはありません。

Switch.adaptive(
  activeColor: activeColor,
  trackColor: MaterialStateProperty.all(trackColor),
  value: state.value,
  onChanged: (value) => state.value = value,
),

こんな感じでプロパティを指定することで効かせることは可能です。

でも、ちょっとねぇ。。。笑
せっかくThemeData使ってるのに結局毎回色指定するん？って言う。

やっぱり我々は諦めるしかないのでしょうか？

今までは諦める必要がありました。
そんなあなたに、ThemeData.adaptationsです！

期待の新星adaptationsとは？

まずは、実装例を見てみましょう。

return ThemeData(
  ...
  adaptations: const [
    _SwitchThemeAdaptation(),
  ],
  ...
);

class _SwitchThemeAdaptation extends Adaptation<SwitchThemeData> {
  const _SwitchThemeAdaptation();

  @override
  SwitchThemeData adapt(ThemeData theme, SwitchThemeData defaultValue) {
    switch (theme.platform) {
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
      case TargetPlatform.linux:
      case TargetPlatform.windows:
        return defaultValue;
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
        return SwitchThemeData(
          trackColor: WidgetStateProperty.resolveWith((states) {
            if (states.contains(WidgetState.selected)) {
              return Colors.amber;
            }
            return null;
          }),
        );
    }
  }
}

いけてますね！

今後の展望

うおおおおおおおおおおお、これがあればあれもこれも出来てしまうではないか！！！！！
と思われた方、申し訳ありません。

実は、このAdaptation、現状Switch.adaptiveにしか適用できません。
が、Adaptationと抽象化されているところを考えると、
今後CircularProgressIndicatorやCheckboxなどadaptiveコンストラクタが用意されているクラスには適宜適用されていくのではと思います。