Open7

Android14から追加された「色のコントラスト」の設定をFlutterでも参照/対応したい

ピン留めされたアイテム
やくらんやくらん

解決

MethodChannel経由で取得した値を元にテーマを切り替えてやれば、Flutterアプリでも対応可能

Flutter or device_info_plusパッケージなどで今後対応されてほしいのでIssueが無さそうだったら上げてみる

https://github.com/yakitama5/flutter_laboratory/tree/main/apps/color_contrast

できたもの🎉

デフォルト
色のコントラスト:デフォルト 色のコントラスト:中 色のコントラスト:大

対応箇所

color_contrast_service.dart
/// デバイスの「色のコントラスト」設定値を取得
/// 現状ではAndroid14以降のみ?
Future<ColorContrast?> getColorContrast() async {
  final result = await _channel.invokeMethod('');

  // TODO(yakitama5): PlatformやAndroidバージョンに応じて取得有無を判断する
  final contrast = _tryParseDouble(result);
  if (contrast == null) {
    return null;
  }

  // HACK(yakitama5): Android側の定数値みたいなものがないか調査
  return switch (contrast) {
    >= 1 => ColorContrast.high,
    >= 0.5 => ColorContrast.middle,
    _ => ColorContrast.low,
  };
}
app_theme_provider.dart
/// 「色のコントラスト」の設定値を基にアプリのテーマを管理

ThemeData appTheme(Ref ref) {
  // 「色のコントラスト」の内容を取得
  final colorContrast = ref.watch(colorContrastProvider).value;
  if (colorContrast == null) {
    return defaultTheme;
  }

  // 内容に応じてテーマを設定
  return switch (colorContrast) {
    ColorContrast.low => defaultTheme,
    ColorContrast.middle => middleContrastTheme,
    ColorContrast.high => highContrastTheme,
  };
}
app.dart
// Providerで管理しているテーマをアプリに設定
final theme = ref.watch(appThemeProvider);

return MaterialApp(
  home: const ColorContrastPage(),
  theme: theme,
);
やくらんやくらん

MethodChannelを利用して値を取得することは出来た

MainActivity.kt
// 「色のコントラスト」の設定内容取得
val uiModeManager = getSystemService(Context.UI_MODE_SERVICE) as UiModeManager
val contrast = uiModeManager.getContrast();
やくらんやくらん

その他

アクセシビリティとして、「高コントラストテキスト」についても少しだけ調査

Issueは上がっているもののしばらく対応されていない
Google製アプリでもFlutterで作られたものは対応されていなかったので、恐らく未対応と思われる
https://github.com/flutter/flutter/issues/30974