【日本語版】【Flutter】Widget of the Week – #43 AnimatedSwitcher【要約】

動画

要約

  • AnimatedSwitcherを使えば、widgetの切り替えをアニメーション付きでできる
  • アニメーションの種類も自由に選べる

内容

AnimatedSwitcherを使えば、複数のwidgetの表示をアニメーション付きで切り替えることができます。
 

まず最初に表示するwidgetをAnimatedSwicherの子widgetに設定します。さらにトランジションの長さも設定します。
 

まず、childにwidgetを指定
durationにアニメーションの長さを指定

これで準備完了です。

別のwidgetに表示を切り替えたい場合は、最初にセットしたmyAnimatedWidgetに別widgetをセットしてください。

それだけでAnimatedSwitcherがアニメーション付きで切り替えてくれます。
 

_myAnimatedWidgetに別のwidgetをセットしてsetStateすれば、
あとはAnimatedSwitcherがやってくれる

デフォルトでは、FadeTransitionでアニメートしますが、変更することも可能です。

transitionBuilderにScaleTransitionやRotationTransitionなどを設定することが可能です。
 

デフォルトはFadeTransition
transitionBuilderを実装することで、他のアニメーションに変更可能
ScaleTransitionやRotateTransitionも使える

またlayoutBuilderを設定して、新しいwidgetの表示方法や位置を変更することもできます。

注意点として、切り替えるwidgetが直前のwidgetと同じ型の場合はkeyを設定することを忘れないでください。

同じ型のwidgetに切り替える場合はkeyを設定して、Flutterが識別できるようにする

まとめ

Widget of the Weekの#43 AnimatedSwitcherの日本語翻訳版でした。

AnimatedSwitcherによりwidgetの切り替えをアニメートでき、ユーザーがより理解しやすいUIになります。

切り替えが分かりにくい部分があれば、AnimatedSwitcherを検討してみてもいいかもしれません。

■ 次の記事はこちら
#44 – AnimatedPositioned

■Widget of the Week まとめ
Widget of the Week 一覧