動画
要約
- AnimatedPaddingを使えば、Paddingの変化をアニメーション付きで表現できる
- 使い方はwidgetをAnimatedPaddingでラップして、padding, duration, curveを与えるだけ
内容
Paddingはwidget間にスペースを作ることができる便利なwidgetです。
では、このPaddingのスペースをアニメーション付きで変化させたい場合はどうすればいいでしょうか？
そんなときは、AnimatedPaddingを使ってみましょう。
使い方は簡単です。まず、Paddingを指定したいwidgetをAnimatedPaddingでラップし、paddingの値も指定します。
その後、アニメーションの長さをdurationで指定します。
さらに、アニメーション変化の種類をcurveに指定します。
これで準備は完了です。
あとは、StatefulWidgetのsetState等でpaddingの値を変えるだけで、
アニメーション付きでpaddingが変化します。
まとめ
Widget of the Weekの#45 AnimatedPaddingの日本語翻訳版でした。
アニメーションを実現するwidgetはたくさんありますが、AnimatedPaddingはPaddingに特化したアニメーションwidgetです。
Paddingのアニメーションをとてもシンプルに実現することができます。
■ 次の記事はこちら
#46 – IndexedStack
■Widget of the Week まとめ
Widget of the Week 一覧