here で説明されているように、さまざまな解像度のフラッタープロジェクト画像を使用しています。ダークモードテーマのカスタム画像を追加したいと思います。pubspec.yaml のアセット宣言は次のようになります。
flutter:
uses-material-design: true
assets:
- assets/images/img_menu.png
- ...
私の資産構造:
.../pubspec.yaml
.../assets/images/img_menu.png
.../assets/images/0.75x/img_menu.png
.../assets/images/1.5x/img_menu.png
.../assets/images/2.0x/img_menu.png
.../assets/images/3.0x/img_menu.png
.../assets/images/4.0x/img_menu.png
この方法でプロジェクトに画像をロードします：
Image.asset('assets/images/img_menu.png')
シンプルな単色画像の場合、次のように色を変更できることを知っています。
Image.asset('assets/images/img_menu.png',
color: Theme.of(context).brightness == Brightness.light
? Colors.black
: Colors.white,)
しかし、ほとんどの画像はより複雑であるため、それらのカスタム アセットを読み込む必要があります。
ここで説明されているように、ダーク モード アセットを追加した後は、何も変更せずに pubspec を終了できます。ダーク モード用にさまざまなアセット構造を試しましたが、どれも機能しません。
1:
.../pubspec.yaml
.../assets/images/img_menu.png
.../assets/images/dark/img_menu.png
.../assets/images/0.75x/img_menu.png
.../assets/images/0.75x/dark/img_menu.png
.../assets/images/1.5x/img_menu.png
.../assets/images/1.5x/dark/img_menu.png
.../assets/images/2.0x/img_menu.png
.../assets/images/2.0x/dark/img_menu.png
.../assets/images/3.0x/img_menu.png
.../assets/images/3.0x/dark/img_menu.png
.../assets/images/4.0x/img_menu.png
.../assets/images/4.0x/dark/img_menu.png
2:
.../pubspec.yaml
.../assets/images/img_menu.png
.../assets/images/0.75x/img_menu.png
.../assets/images/1.5x/img_menu.png
.../assets/images/2.0x/img_menu.png
.../assets/images/3.0x/img_menu.png
.../assets/images/4.0x/img_menu.png
.../assets/images/dark/img_menu.png
.../assets/images/dark/0.75x/img_menu.png
.../assets/images/dark/1.5x/img_menu.png
.../assets/images/dark/2.0x/img_menu.png
.../assets/images/dark/3.0x/img_menu.png
.../assets/images/dark/4.0x/img_menu.png
3:
.../pubspec.yaml
.../assets/images/img_menu.png
.../assets/images/0.75x/img_menu.png
.../assets/images/1.5x/img_menu.png
.../assets/images/2.0x/img_menu.png
.../assets/images/3.0x/img_menu.png
.../assets/images/4.0x/img_menu.png
.../assets/dark/images/img_menu.png
.../assets/dark/images/0.75x/img_menu.png
.../assets/dark/images/1.5x/img_menu.png
.../assets/dark/images/2.0x/img_menu.png
.../assets/dark/images/3.0x/img_menu.png
.../assets/dark/images/4.0x/img_menu.png
単一の画像の解決策は、次のようにロードすることです。
Image.asset(Theme.of(context).brightness == Brightness.light
? 'assets/images/img_menu.png'
: 'assets/images/dark/img_menu.png',)
しかし、これはプロジェクト全体にとって便利な解決策ではありません。
奇妙なことに、2 バリアント アプリでは、ライト テーマとダーク テーマの両方の暗いイメージが読み込まれます (iPhone と Android でテスト済み)。
問題は、ダーク モードと解像度を意識した画像アセットのファイル構造はどのようにすべきかということです。