smooth scroll ⚡☺ Flutterで大量の画像付きリストを スムーズにスクロールできるようにするノウハウ

⾃⼰紹介 ● 　 menuのフロントエンドエンジニア Flutterで店舗向けのアプリを開発 ● 2022年卒、現在3年目 ● テーマパークが好きで、関連アプリを趣味で開発中です！！ 坂井田 逸斗 Sakaida Hayato rabbitprogram.com Rabbit_Program

1) はじめに ● １店舗に数千規模の商品が登録されている ● 時間を掛けずに・ストレス無く操作できるように

2) 画像付きのスクロール ● ListView.builder で指定個数分リスト表示 ● ListTile で項目の表示を設定 ● leading で左側の要素を指定 ● Image.network でURLの画像を表示 ※アニメーション：https://x.gd/guF5U

2) 画像付きのスクロール 画像が読み込まれるまで、何も表示されない 読み込まれているかどうか分からず、不安になる ※アニメーション：https://x.gd/guF5U

3) 読込中表⽰‧キャッシュ ● cached_network_image パッケージを使用 ○ キャッシュできる ○ 読込中は別のウィジェットを表示 ● Image.network の代わり ※アニメーション：https://x.gd/6WmCp

3) 読込中表⽰‧キャッシュ どの項目も同じ文字が表示される 項目の情報が一目でわかるようにしたい ※アニメーション：https://x.gd/6WmCp

4) 雰囲気を伝える ● precacheImage で、先に圧縮した画像を読み込む ● blur パッケージで、圧縮した画像をぼかして表示 ○ ドットが目立たないようにするため ● 読み込みが完了したら、元画像を表示 （CachedNetworkImage） 最大 25px 品質 20 サイズ 685B LOADING サイズ 1.5MB 圧縮JPEG画像 元の画像 ウィジェット ※アニメーション：https://x.gd/qWris

https://x.gd/qWris https://x.gd/guF5U https://x.gd/6WmCp

5) まとめ GitHubにサンプルコードがあります https://github.com/hayato-sakaida-rh/20240 514_flutter_smooth_scroll Sakaida Hayato テックブログもあります！ https://techblog.reazon.jp/entry/2024/03/0 7/150348