Open7
Android14から追加された「色のコントラスト」の設定をFlutterでも参照/対応したい
ピン留めされたアイテム
解決
MethodChannel
経由で取得した値を元にテーマを切り替えてやれば、Flutterアプリでも対応可能
Flutter or device_info_plusパッケージなどで今後対応されてほしいのでIssueが無さそうだったら上げてみる
できたもの🎉
デフォルト | 中 | 高 |
---|---|---|
対応箇所
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,
);
参照したい設定
iOSにおけるハイコントラスト設定に対応するためのプロパティは用意されている
- ハイコントラスト時の利用テーマ
MaterialApp.highContrastTheme
- ハイコントラストか否かの判定
MediaQuery.highContrastOf
dynamic_colorパッケージに関連Issueは存在している
Flutter本体では今のところ見つけられていない
よりネイティブに近い「Jetpack Compose」「material-components」では対応されている様子
ネイティブコード呼び出しをする必要はあるが、参照することはできそう
MethodChannel
を利用して値を取得することは出来た
MainActivity.kt
// 「色のコントラスト」の設定内容取得
val uiModeManager = getSystemService(Context.UI_MODE_SERVICE) as UiModeManager
val contrast = uiModeManager.getContrast();
その他
アクセシビリティとして、「高コントラストテキスト」についても少しだけ調査
Issueは上がっているもののしばらく対応されていない
Google製アプリでもFlutterで作られたものは対応されていなかったので、恐らく未対応と思われる