リストのスクロール方法の検討

by Kanta Mori

Slide 1

Slide 1 text

リストのスクロール方法の検討 YOUTRUST × ゆめみ Flutter LT会 #4

Slide 2

Slide 2 text

自己紹介 ● 名前: 森寛太 ● ゆめみの Flutter エンジニア ● GitHub: https://github.com/morikann

Slide 3

Slide 3 text

リストのアイテムにスクロールする方法は何がある？🤔

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

計算が大変😱

Slide 6

Slide 6 text

Key を割り当てる方法がある💡

Slide 7

Slide 7 text

Keyを作成し、リストのアイテムに渡す遷移したいwidgetのcontextを渡してスクロール

Slide 8

Slide 8 text

Keyを作成し、リストのアイテムに渡す遷移したいwidgetのcontextを渡してスクロール

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

問題点あらかじめ全てのリストアイテムにKeyを割り当てる必要がある効率的なリストには使えない（ex. ListView.builder, SliverList.builder）

Slide 11

Slide 11 text

どうするか 🤔

Slide 12

Slide 12 text

scrollable_positioned_list ● Googleが開発 ● 効率的なカスタムリストを提供 ● スクロールによるリストアイテムへの移動 ● ジャンプによるリストアイテムへの移動

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

問題点 ● 画面全体でスクロールできる、かつ画面の一部にリストを表示する構成ができない ● CustomScrollView + SliverFillRemainingで ScrollablePositionedList.builderをラップするとそれっぽい画面はできるが期待する動作にはならない

Slide 15

Slide 15 text

Slide 16

Slide 16 text

どうするか 🤔

Slide 17

Slide 17 text

scroll_to_index ● カスタムリストの提供はなし ● 既存のリストに適用可能 ● スクロールによるリストアイテムへの移動 ● ジャンプによるリストアイテムへの移動は提供していない 󰢃

Slide 18

Slide 18 text

AutoScrollController のインスタンスを作成 AutoScrollTag でリストアイテムをラップスクロールメソッドにindexを提供するだけ

Slide 19

Slide 19 text

AutoScrollController のインスタンスを作成 AutoScrollTag でリストアイテムをラップスクロールメソッドにindexを提供するだけ

Slide 20

Slide 20 text

まとめ ● リストのスクロール方法は色々ある ● デザイン、要件に合わせて適切な方法を取っていきたい

Slide 21

Slide 21 text

ご清聴ありがとうございました！