すらぼうの開発ノート

flutterエンジニアのメモ

【Flutter】AnimatedSizeでウィジェットの大きさが変わるアニメーションを作る

アプリを開発していると以下の機能を実装したい時がある。

このような場合AnimatedSizeを用いると簡単にアニメーションが作成できる。

api.flutter.dev

本エントリでは以下の流れでAnimatedSizeを用いたアニメーションの作り方を説明する。


AnimatedSize使用パターン

主な使用パターン別に動作画像とコードを示す。

使用しているプロパティは「各プロパティ」のセクションで説明する。

何かしらのボタンが押された際にサイズを変化させる

アイコンをタップすることでサイズを変化

タップでサイズを10増やし、ダブルタップでサイズを100に戻している。 AnimatedSizeは基本的にこの様に何かトリガー操作をユーザーが行い、それに反応する形でサイズを変更するパターンが多い。


各プロパティ

duration

必須のプロパティ。アニメーションを表示させる時間を指定する。渡す値はDurationクラスのインスタンス

api.flutter.dev

curve

アニメーションのイージングを指定する。渡す値はCurveクラスのインスタンス

api.flutter.dev

イージングについては以下の記事などを参照。

ics.media