Flutterで画像表示でクラッシュする時の対応

こんな時に参考になるかも

• ListViewやColumn、Rowなどで、Imageを複数表示したい。
• 画像表示でシミュレーターが Lost connection to device で落ちる
• 実機で画像のある画面をスクロールするとクラッシュする

解決に向けて試すこと

1. ListView で画面表示部分だけ画像読み込みされるようにする

   • 10件くらい表示すると概ね落ちます。
   • １画面に表示される３件程度にすると概ね表示できます。(SizedBoxなどで事前に高さを確保すること）
   • ColumnやRowは要素を全て生成してしまうので、利用している場合は、ListViewなどに切り替えすると良いです。

2. flutter_image_compress で縮小して表示

   • ３MB を 100KB 以下までリサイズすると、３０件くらい表示しても耐えられます。

     FlutterImageCompress.compressWithList(data,
       quality: 70, minWidth: 500, minHeight: 500)
   

3. cached_network_image でキャッシュされるようにする

原因

メモリが足りない。

スマホで撮影した写真は、とても高画質で 3MB 程度あるのが普通なので、これを大量に表示すると、メモリ利用が急激に上がりクラッシュする。

余談

私の作成しているアプリでは、リサイズが一番効果ありました。
スマホで撮った写真をアプリ内表示することは、結構あるケースなので一覧表示する場合は、サイズを調整してから表示することをお勧めします。