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
450
0
Share
リストのスクロール方法の検討
Kanta Mori
December 08, 2023
More Decks by Kanta Mori
See All by Kanta Mori
ゆめみの Flutter エンジニア育成方法
morikann
2
1.6k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
99
Fireside Chat
paigeccino
42
3.9k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
470
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
110
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
27
3.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
170
How to train your dragon (web standard)
notwaldorf
97
6.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
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を提供するだけ
まとめ • リストのスクロール方法は色々ある • デザイン、要件に合わせて適切な方法を取っていきたい
ご清聴ありがとうございました!