実例から学ぶジェスチャー操作とナビゲーション by kumamo_tone

2023年7月に、キャリアSNSアプリYOUTRUSTの、投稿画像やプロフィール画像の閲覧機能の改善を行いました。

画像ビューアのライブラリはすでに広く使われているものが多数ありますが、重ねるコンテンツをカスタマイズできる余地を残しつつ、「ピンチ・ダブルタップズーム」「上下にスワイプして閉じる」などの機能を、違和感なく同時に実現するためには、既存のものでは解決できず、標準の機能を組み合わせて実装する必要がありました。

また、画面遷移時や、タップ時やスワイプ時のアニメーションを工夫することにより、既存のものに比べてスムーズで直感的な動きを実現することができました。

このセッションでは、実際の画像閲覧機能の実装と、直感的な動きを実現するためのアニメーションなどについて紹介します。また、関連する以下の要素などについて解説し、理解を深めます。

■ジェスチャー操作に応じた体験を作る要素

・GestureDetector
・Listener
・InteractiveViewer

■アニメーションを実現するための要素

・Animation widgets
・Tween
・Hero / PageRoute

想定視聴者

• Flutterで基本的なアプリを作ったことがある人
• タッチ操作に応じた動作をする機能を開発したい人
• アニメーションやUX改善に興味がある人