Smooth Scroll 〜Flutterで大量の画像付きリストをスムーズにスクロールできるようにするノウハウ〜

2024/5/21(火) に開催されたmobile勉強会で発表したスライド資料です。

・勉強会について：https://wantedly.connpass.com/event/316051/
・テックブログ：https://techblog.reazon.jp/entry/2024/03/07/150348
・サンプルリポジトリ：https://github.com/hayato-sakaida-rh/20240514_flutter_smooth_scroll

Transcript

1. smooth scroll ⚡☺ Flutterで大量の画像付きリストを スムーズにスクロールできるようにするノウハウ
2. ⾃⼰紹介 • 　 menuのフロントエンドエンジニア Flutterで店舗向けのアプリを開発 • 2022年卒、現在3年目 • テーマパークが好きで、関連アプリを趣味で開発中です！！ 坂井田 逸斗 Sakaida Hayato rabbitprogram.com Rabbit_Program
3. 1) はじめに • １店舗に数千規模の商品が登録されている • 時間を掛けずに・ストレス無く操作できるように
4. 2) 画像付きのスクロール • ListView.builder で指定個数分リスト表示 • ListTile で項目の表示を設定 • leading で左側の要素を指定 • Image.network でURLの画像を表示 ※アニメーション：https://x.gd/guF5U
5. 2) 画像付きのスクロール 画像が読み込まれるまで、何も表示されない 読み込まれているかどうか分からず、不安になる ※アニメーション：https://x.gd/guF5U
6. 3) 読込中表⽰‧キャッシュ • cached_network_image パッケージを使用 ◦ キャッシュできる ◦ 読込中は別のウィジェットを表示 • Image.network の代わり ※アニメーション：https://x.gd/6WmCp
7. 3) 読込中表⽰‧キャッシュ どの項目も同じ文字が表示される 項目の情報が一目でわかるようにしたい ※アニメーション：https://x.gd/6WmCp
8. 4) 雰囲気を伝える • precacheImage で、先に圧縮した画像を読み込む • blur パッケージで、圧縮した画像をぼかして表示 ◦ ドットが目立たないようにするため • 読み込みが完了したら、元画像を表示 （CachedNetworkImage） 最大 25px 品質 20 サイズ 685B LOADING サイズ 1.5MB 圧縮JPEG画像 元の画像 ウィジェット ※アニメーション：https://x.gd/qWris
9. https://x.gd/qWris https://x.gd/guF5U https://x.gd/6WmCp
10. 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