【日本語版】【Flutter】Widget of the Week – #45 AnimatedPadding【要約】

動画

要約

  • 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 一覧