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