Flutter : darkmodeがある時の背景色と文字色のコントラストの指定方法について

FlutterでContainerの中にTextがあるようなケースです。

Container(
    child:Text('test'),
)

ここでContainerの背景色を指定します。

Container(
    color:Colors.blue[100],
    child:Text('test'),
)

ライトテーマ時の文字色がデフォルトの黒、
Containerの背景色がColors.blue[100]
で、これでライトテーマ時に問題無いデザインである、ということにします。

ただ、ダークテーマに切り替えると文字色が白色になるのですが、
指定した背景色はColors.blue[100]のままなので、背景色と文字色のコントラストが不明瞭でかなり文字が読みづらくなってしまいます。

まず頭に浮かんだ方法として、

Container(
    color:Theme.of(context).brightness == Brightness.light ? Colors.blue[100] : Colors.blue,
    child:Text('test'),
)

上記のようにすればダークテーマ時は背景色がColors.blueになるので、読みづらくなくなりました。

なのでここはこれで解決なのですが、こういうケースで上記のように手動で毎回ダークテーマ時の背景色を場合分けで指定するのは冗長に感じてしまいます。

フレームワークとしてもう少しスマートなやり方があるのかなあ、あれば良いなあ、という感じなのですが何かありますでしょうか?
頭に浮かんでいるのはTheme、ThemeDataを使って、アプリ全体で統一的にこういう問題を解決する(もっとスマートな)方法があるのか、ということが気になっています。

行動規範の内容に同意します

回答1件

ベストアンサー

実際に利用しているわけではないのですが、こんな方法があるのではないかというアイデアですが。

拡張メソッド(Extension methods)を使用する
Themeに対して該当する色を取得するメソッド（とその色を保存する領域など）を追加してそれを呼び出すようにする。これの場合メソッドを追加したテーマオブジェクトを用意しMaterialApp経由で設定しておく必要があるようですが。
https://stackoverflow.com/questions/49172746/is-it-possible-extend-themedata-in-flutter
上記の2番目の回答がそれにあたると思います。

専用のウィジェットクラスを作る
Textをコンテナでくくり特定の背景色を指定したものにするカスタムウィジェットを用意する。
StatelessWidgetの派生で作るのが良いのかな？

dart
1class CustomText extends StatelessWidget {
2  const CustomText(this.data, {Key? key}) : super(key: key);
3
4  final String data;
5
6  @override
7  Widget build(BuildContext context) {
8    return Container(
9      color: Theme.of(context).brightness == Brightness.light
10          ? Colors.blue[100]
11          : Colors.blue,
12      child: Text(data),
13     );
14  }
15}