2023/1/6

【Flutter】簡単にアニメーションを実現するサンプル

【Flutter】簡単にアニメーションを実現するサンプル

Flutter で簡単にアニメーションを実現するサンプル。 今回は公式ドキュメントから動画やサンプルコードがあり簡単に実装ができるものをまとめたものになります。

環境

• Flutter 3.3.10

大きさを変化させる ScaleTransition

• ScaleTransition class - widgets library - Dart API

表示サイズを変化させる SizeTransition

• SizeTransition class - widgets library - Dart API

透過率を変化させる FadeTransition

• FadeTransition class - widgets library - Dart API

スクロールリストの透過率を変化させる SliverFadeTransition

• SliverFadeTransition class - widgets library - Dart API

くるくる回る RotationTransition

• RotationTransition class - widgets library - Dart API

スライドする SlideTransition

• SlideTransition class - widgets library - Dart API

位置座標を変更する AnimatedPositioned

• AnimatedPositioned class - widgets library - Dart API

余白を変化させる AnimatedPadding

• AnimatedPadding class - widgets library - Dart API

位置を変化させる AlignTransition

• AlignTransition class - widgets library - Dart API

特定の位置に変化させる PositionedTransition

※RelativePositionedTransition と似ています。

• PositionedTransition class - widgets library - Dart API

特定の位置に変化させる RelativePositionedTransition

※RelativePositionedTransition と似ています。

• RelativePositionedTransition class - widgets library - Dart API

テキストのスタイルを変化させる DefaultTextStyleTransition

• DefaultTextStyleTransition class - widgets library - Dart API

DecoratedBoxを変化させる DecoratedBoxTransition

• DecoratedBoxTransition class - widgets library - Dart API