スワイプで閉じれる画像ビューアを作る

by kumamotone

Slide 1

Slide 1 text

スワイプで閉じれる画像ビューアを作る 2023/07/24　YOUTRUST x ゆめみ Flutter LT会 #2 @kumamo_tone

Slide 2

Slide 2 text

@kumamo_tone 株式会社YOUTRUSTでFlutterアプリ開発をやっています @kumamo_tone @kumamo_tone

Slide 3

Slide 3 text

スワイプで閉じれる画像ビューアを作りました画像ビューアの改善 ● 上下にスワイプで画面を閉じる ○ ドラッグ量に応じて画像の位置が移動 ○ ドラッグ量に応じて透明度が変化 ● ピンチ・ダブルタップで拡大・縮小 ○ スクロールで表示位置を調整できる YOUTRUST App v2.5.3〜

Slide 4

Slide 4 text

画面構成 GestureDetector ダブルタップ(ズーム)のキャッチ InteractiveViewer Listener 拡大したときにスクロール可能にするための標準 Widget ドラッグ量を取得 DecoratedBoxTransition (content) ドラッグ量に応じて透明度を変更ドラッグ量に応じて位置を変更 SlideTransition

Slide 5

Slide 5 text

Slide 6

Slide 6 text

GestureDetector + InteractionViewer ● InteractionViewer: childのpanとzoomを可能にするWidget [*1] ○ いわゆるピンチイン・ピンチアウト ○ 標準でダブルタップでズームする機能はないダブルタップの機能の追加 [*2] 1. transformationController を InteractionViewer の引数に渡す 2. GestureDetector の onDoubleTapDown: で、ダブルタップ位置 details.localPosition を保存 3. GestureDetector の onDoubleTap: で、保存した位置を使って transformationController の値を変更 [*1] https://api.flutter.dev/flutter/widgets/InteractiveViewer-class.html [*2] https://stackoverflow.com/questions/65408346/flutter-enable-image-zoom-in-out-on-double-tap-using-interactiveviewer

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Listener + SlideTransition ● onPointer[Down|Up|Cancel|Move] メソッド ○ ドラッグ量を変数に保存 ○ SlideTransition/DecoratedBoxTransitionでドラッグ量に応じて位置/透明度を変更 ○ GestureDetector の onVerticalDragUpdate だと、拡大中でも閉じれてしまう問題を解決できなかった ○ 指を離したタイミングで、 ■ しきい値以内ならドラッグ量を0に戻して animationController.reverse() する ■ しきい値以上なら画面を閉じる

Slide 9

Slide 9 text

そのほか自然っぽい感じになるようにチューニングしたり、細かいアニメーションが入ったりしています ● 画面遷移のトランジション ○ 開くときに PageRoute の buildTransitions でふわっと開く ○ Heroウィジェットで位置を補間する ● インタラクション中は閉じるボタンが引っ込む ○ SlideTransition/FadeTransition の組み合わせでふわっと引っ込む ● スワイプ中に新しい指が追加されたり、 3本以上指が触れている場合はキャンセルする

Slide 10

Slide 10 text

まとめ ● スワイプで閉じれる画像Viewerを作った ○ パン・ズームのために GestureDetector + InteractiveViewer を使う ○ Listener で取得したドラッグ量を使って位置や透明度を変更することで、少しずつ前の画面に戻っている感を出す ■ 指を離した時点でしきい値を越えていたら、画面を閉じる