【Flutter】Container transformな画面遷移（animations,motion）
【Flutter】Container transformな画面遷移（animations,motion）
アニメーションを取り入れたUIは、とても身近でよく目にするものです。
- 画面遷移で横にスライドする
- 下から新しいコンテンツが現れる
- コンテンツを押したら詳細画面が展開する
これらのUIは、自然な表現で画面内の変化を滑らかにします。
アプリの動線を見せることでユーザーに画面遷移の仕組みを理解してもらうのに役立ちます。
この記事では、アニメーションを使用したUIを実装し、ユーザーが理解しやすい画面遷移を検討します。
アプリを便利にするアニメーションとは
アニメーションを表現するにはいくつもの方法が存在します。
その中でも、アプリを便利にするアニメーションにはどのようなものがあるでしょうか。
Flutter 3.16からデフォルトになった[1]Material Design 3の中から、Transitionsを確認したところ、Container transformというアニメーションが示されていました。[2]
Material Design 3とは
Material Design 3（MD3）は、Googleが開発したデザインシステムです。
AndroidやGmailなどのGoogleアプリで利用されていて、モバイル、デスクトップ、ウェブなど、さまざまなデバイスに対応しています。
このContainer transformは、画面遷移の開始状態と終了状態をシームレスに接続するため、遷移前と遷移後の要素間に強い関係を表現できます。
要素間の関係を表現することで、ユーザーが画面遷移の仕組みを理解しやすくなります。
Flutterで実装する
このContainer transformな画面遷移を実装する方法を調べました。
Flutter公式の対応状況と対応パッケージ
FlutterのissueにはMaterial Design 3をサポートするためのissueがありますが、Container transformなどのTransitionsはまだ対応していないようです。
そのため、今回はMaterial Design 3のResources[3]に記載されているパッケージを試しました。
animationsパッケージを使用する
animationsパッケージはFlutter公式から提供されているパッケージです。
Flutter公式YouTubeチャンネルに紹介動画もあります。
実装例
実際に実装した画面がこちらです。
OpenContainerを利用し、展開前のWidgetと展開後のWidgetを指定します。
closedBuilderには、展開前のWidgetを指定します。
openBuilderには、展開後のWidgetを指定します。
animationsパッケージはContainer transformだけでなく、他のTransitionsも実装できます。
- Shared axis
- Fade through
- Fade
Flutterの公式のissueにMaterial Design 3のTransitionsの対応状況が記載されています。
そのissueの対応状況によっては、別の実装方法が示されるかもしれませんが、よければご参考ください。
まとめ
みなさんは画面遷移を実装する時には、どのような実装をしていますか。
コンテンツや機能が多いアプリは画面設計が複雑になり、ユーザーがアプリの仕組みを理解しにくくなるかと思います
画面遷移のアニメーションを活用することで、不快感を与えることなくユーザーに理解してもらいやすくすることが可能です。
もし参考になったところや、疑問に感じたところがあればコメントやいいねをください🌱
画面遷移パターンを追加していきたいと思います🌻
Discussion