開発

【Flutter】PageViewでスライド時にアニメーションさせる実装

こんにちは。

スマホアプリをメインに開発しているロッキーカナイです。

前回、Flutterでカードめくりアニメーションの紹介をしましたが、続編ということで、今回はPageViewでスライド時に、いい感じにアニメーションさせる実装を紹介したいと思います。

やること

  1. PageViewでトランプ画像をスライドさせる時に拡大アニメーションをさせる。
  2. メインのトランプ以外は元の大きさに戻す
  3. ページインジケータを実装する。
  4. 移動時に該当トランプの詳細を出す。

今回はこれらを行なってみたいと思います。

 

コード

まず、1と2の実装を紹介します。

 

素材はこちらから拝借致しました。

 

いい感じにできました。

PageViewの個々のViewを生成時にmarginを変更しアニメーションをさせてます。

上記が該当コードになります。

 

次に3と4のコードを紹介します。

 

インジケータはcircle_page_indicatorのライブラリを使用してます。

特に特殊なことはしておらず、ページ変更がありsetStateされると該当のアイテムリストを参照しテキストを表示させている流れです。

 

さいごに

flutterでアニメーションは結構簡単に実装できます。

今回紹介したものか簡易的なものですが、より凝ったものも実装可能です。

なによりもアニメーションがあるUIだと、ちょっとかっこよくなりますよね。今後そういうものも記事にできたらと思います。

ABOUT ME
ロッキーカナイ
ロッキーカナイ
SwiftやObjective-CでiOS開発や、Flutterを用いたiOS/Androidアプリ開発、PHPでLaravelを使ったWebアプリ開発などをしてます。趣味は猫と戯れる事、キックボクシングにハマってます。ちなみに名前のロッキーカナイは以前よく昼飯を食べてた所。