Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
リストのスクロール方法の検討
Search
Kanta Mori
December 08, 2023
0
410
リストのスクロール方法の検討
Kanta Mori
December 08, 2023
Tweet
Share
More Decks by Kanta Mori
See All by Kanta Mori
ゆめみの Flutter エンジニア育成方法
morikann
1
1.5k
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Statistics for Hackers
jakevdp
799
220k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Docker and Python
trallard
46
3.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Transcript
リストのスクロール方法の検討 YOUTRUST × ゆめみ Flutter LT会 #4
自己紹介 • 名前: 森 寛太 • ゆめみの Flutter エンジニア •
GitHub: https://github.com/morikann
リストのアイテムにスクロールする方法は何がある?🤔
None
計算が大変😱
Key を割り当てる方法がある💡
Keyを作成し、 リストのアイテムに渡す 遷移したいwidgetのcontextを 渡してスクロール
Keyを作成し、 リストのアイテムに渡す 遷移したいwidgetのcontextを 渡してスクロール
None
問題点 あらかじめ全てのリストアイテムにKeyを割り当てる必要がある 効率的なリストには使えない(ex. ListView.builder, SliverList.builder)
どうするか 🤔
scrollable_positioned_list • Googleが開発 • 効率的なカスタムリストを提供 • スクロールによるリストアイテムへの移 動 • ジャンプによるリストアイテムへの移動
None
問題点 • 画面全体でスクロールできる、かつ 画面の一部にリストを表示する構成ができない • CustomScrollView + SliverFillRemainingで ScrollablePositionedList.builderをラップすると それっぽい画面はできるが期待する動作にはならない
問題点 • 画面全体でスクロールできる、かつ 画面の一部にリストを表示する構成ができない • CustomScrollView + SliverFillRemainingで ScrollablePositionedList.builderをラップすると それっぽい画面はできるが期待する動作にはならない
どうするか 🤔
scroll_to_index • カスタムリストの提供はなし • 既存のリストに適用可能 • スクロールによるリストアイテムへの移 動 • ジャンプによるリストアイテムへの移動
は提供していない
AutoScrollController のインスタンスを作成 AutoScrollTag でリストアイテムをラップ スクロールメソッドにindexを提供するだけ
AutoScrollController のインスタンスを作成 AutoScrollTag でリストアイテムをラップ スクロールメソッドにindexを提供するだけ
まとめ • リストのスクロール方法は色々ある • デザイン、要件に合わせて適切な方法を取っていきたい
ご清聴ありがとうございました!