【日本語版】【Flutter】Widget of the Week – #27 AnimatedBuilder【要約】

動画

要約

  • Flutterでアニメーションを実現する方法のひとつにAnimatedBuilderがある
  • 開発者はbuilderメソッド内でアニメーションの状態に応じて自由にwidgetを構築することができる

内容

Flutterのアニメーションフレームワークはwidgetを簡単にアニメートでき、開発者に多くの選択肢を提供しています。

特にAnimatedBuilderはオススメです。

使い方は簡単で、まずAnimatedBuilderにanimationを渡します。
 

ここではTweenを使っています。

Tweenは開始と終了の数値を定義し、数値が開始の値から終了の値まで変化するアニメーションです。

今回は開始を0、終了を 2 * pi = 360としており、この数値の変化を利用して、widgetを0°から360°まで回転させるアニメーションを作ります。
 

animationを指定したら、次はbuilderです。

builderではanimationの状態(今回の場合はanimation.value)を考慮して、結果widgetを返すように実装します。

ここではTransform.rotateを使用し、angleにanimation.valueを指定しています。
 

結果、アニメーションが実行されます。
 

また、AnimatedBuilderに子widgetを渡すこともできます。
 

AnimationBuilderのchildプロパティに指定したwidgetがbuilderの引数(child)として渡される
childに指定したwidgetをアニメートできる

AnimationControllerの管理は特に決まった方法はありませんが、おすすめの方法としてはStatefulWidgetを作成してその中で管理することです。
 

Stateful widgetの中で管理するのがわかりやすい。

まとめ

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

AnimatedBuilderを使えば、自由自在にwidgetをアニメートすることができます。

AnimatedContainerなど、各widgetに特化したAnimated widgetと使い分けて、最適なアニメーションを実現しましょう。

■ 次の記事はこちら
#28 – Dismissible

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