Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
リストのスクロール方法の検討
Search
Kanta Mori
December 08, 2023
0
430
リストのスクロール方法の検討
Kanta Mori
December 08, 2023
Tweet
Share
More Decks by Kanta Mori
See All by Kanta Mori
ゆめみの Flutter エンジニア育成方法
morikann
2
1.5k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
Building an army of robots
kneath
306
46k
4 Signs Your Business is Dying
shpigford
186
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Building Flexible Design Systems
yeseniaperezcruz
330
39k
Embracing the Ebb and Flow
colly
88
4.9k
GitHub's CSS Performance
jonrohan
1032
470k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.2k
Done Done
chrislema
186
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
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を提供するだけ
まとめ • リストのスクロール方法は色々ある • デザイン、要件に合わせて適切な方法を取っていきたい
ご清聴ありがとうございました!