【Flutter】そのまま使えるアニメーションWidget(AnimatedWidget編)

※本記事は下記のZenn本にまとめました。

AnimatedWidget家族

AnimatedWidget は抽象です。その親子関係は下記です。その共通点としてはanimation が必要です。（required Listenable animation,）代表的なAnimatedWidgetはAnimatedBuilder です。

AnimatedWidget [abstract]
|---AnimatedModalBarrier
|---SlideTransition
|---ScaleTransition
|---RotationTransition
|---SizeTransition
|---PositionedTransition
|---RelativePositionedTransition
|---DecoratedBoxTransition
|---AlignTransition
|---DefaultTextStyleTransition
|---AnimatedBuilder

AnimatedBuilderのコンストラクター

animationが必須です。

  /// Creates an animated builder.
  ///
  /// The [animation] and [builder] arguments must not be null.
  const AnimatedBuilder({
    Key? key,
    required Listenable animation,
    required this.builder,
    this.child,
  }) : assert(animation != null),
       assert(builder != null),
       super(key: key, listenable: animation);

AnimatedWidgetの使用例

SizeTransition

  const SizeTransition({
    Key? key,
    this.axis = Axis.vertical,
    required Animation<double> sizeFactor,
    this.axisAlignment = 0.0,
    this.child,
  }) : assert(axis != null),
       assert(sizeFactor != null),
       assert(axisAlignment != null),
       super(key: key, listenable: sizeFactor);

SizeTransition を使用して、部品サイズ変化のアニメーションを実行させることができます。
タイプ Animation<double> のアニメーターを渡す必要があります。

size_transition_page.dart

ScaleTransition

  const ScaleTransition({
    Key? key,
    required Animation<double> scale,
    this.alignment = Alignment.center,
    this.filterQuality,
    this.child,
  }) : assert(scale != null),
       super(key: key, listenable: scale);

ScaleTransition を使用して、スケーリング アニメーションを実行させることができます。
タイプ Animation<double> のアニメーターを渡す必要があります、 さらに、スケールの中心はデフォルトでAlignment.center設定されます。

scale_transition_page.dart

RotationTransition

  const RotationTransition({
    Key? key,
    required Animation<double> turns,
    this.alignment = Alignment.center,
    this.filterQuality,
    this.child,
  }) : assert(turns != null),
       super(key: key, listenable: turns);

RotationTransition を使用して、コンポーネントを回転するアニメーションさせることができます。タイプ Animation<double> 型のアニメーターを渡す必要があります。さらに、回転の中心はデフォルトでAlignment.center設定されます。

rotation_transition_page.dart

SlideTransition

  const SlideTransition({
    Key? key,
    required Animation<Offset> position,
    this.transformHitTests = true,
    this.textDirection,
    this.child,
  }) : assert(position != null),
       super(key: key, listenable: position);

SlideTransition を使用して、コンポーネントが親領域でスライドアニメーションを実行できす。タイプ Animation<Offset> のアニメーターを渡す必要があります。さらに、bool値 transformHitTests で移動されたコンポーネントのHitTestsが影響されるがどうかを設定します。デフォルトは true です。textDirectionは移動方向です。

enum TextDirection {
  rtl,
  ltr,
}

slide_transition_page.dart

AlignTransition

  const AlignTransition({
    Key? key,
    required Animation<AlignmentGeometry> alignment,
    required this.child,
    this.widthFactor,
    this.heightFactor,
  }) : assert(alignment != null),
       assert(child != null),
       super(key: key, listenable: alignment);

lignTransition は、子Widgetが親の領域内での整列移動アニメーションです。AlignmentGeometry型のアニメーターを渡す必要があります。さらに、widthFactorとheightFactorはそれぞれ幅と高さ係数であり、Align Widgetと同じ役割を果たします。childは移動させたいWidgetです。

align_transition_page.dart

DecoratedBoxTransition

  const DecoratedBoxTransition({
    Key? key,
    required this.decoration,
    this.position = DecorationPosition.background,
    required this.child,
  }) : assert(decoration != null),
       assert(child != null),
       super(key: key, listenable: decoration);

DecoratedBoxTransition は、Widgetに装飾アニメーションを適用できます。Decoration 型のアニメーターを渡す必要があります。さらに、positionパラメーターは前景装飾か背景装飾かを制御します。childは移動させたいWidgetです。

enum DecorationPosition {
  /// Paint the box decoration behind the children.
  background,
  /// Paint the box decoration in front of the children.
  foreground,
}

decorated_box_transition_page.dart