すらぼうの開発ノート

flutterエンジニアのメモ

【Flutter】AnimatedOpacityでフェードインするアニメーションを作る

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

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

api.flutter.dev


AnimatedOpacity使用パターン

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

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

ウィジェットをフェードインで表示する

フェードイン

「Fade in Flutter logo.」ボタンを押すと2秒間かけてopacityプロパティを0から1に変化させFlutterLogo()をフェードインするアニメーションを表示している。

ウィジェットをフェードアウトさせる

フェードアウト

各プロパティ

opacity

必須プロパティ。childに指定されたウィジェットの透過度を設定する。 0が完全に透明で1が完全に不透明となる。

duration

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

api.flutter.dev

curve

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

api.flutter.dev

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

ics.media

onEnd

移動アニメーションが終了した際にコールされるイベントハンドラ。 本エントリのコードでは記述していないが、使用頻度がまあまああると思われるプロパティ。