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

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

ImplicitlyAnimatedWidget家族

ImplicitlyAnimatedWidget は抽象です。その親子関係は下記です。ImplicitlyAnimatedWidget家族はSingleTickerProviderStateMixinの継承いらなくなりました。

...
class _AnimatedContainerPageState extends State<AnimatedContainerPage> {
...

ImplicitlyAnimatedWidget [abstract]
|---AnimatedContainer
|---AnimatedPadding
|---AnimatedAlign
|---AnimatedPositioned
|---AnimatedPositionedDirectional
|---AnimatedScale
|---AnimatedRotation
|---AnimatedSlide
|---AnimatedOpacity
|---SliverAnimatedOpacity
|---AnimatedDefaultTextStyle
|---AnimatedPhysicalModel
|---TweenAnimationBuilder
|---AnimatedTheme

ImplicitlyAnimatedWidget使用例

AnimatedContainer

Container 内の各属性をアニメーション化できるため、非常に実用的です。アニメーションの時間duration を設定し、アニメーションの曲線curve やアニメーションの終了時に呼び出されるコールバックonEnd を設定することができます。これらの設定はImplicitlyAnimatedWidget で共通しています。

  AnimatedContainer({
    Key? key,
    this.alignment,
    this.padding,
    Color? color,
    Decoration? decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
    Curve curve = Curves.linear,
    required Duration duration,
    VoidCallback? onEnd,
  })

下記の例ではContainerの高さ、枠線、色のグラデーションアニメーションです。
animated_container_page.dart

AnimatedAlign

AnimatedWidget家族のAlignTransition の使い方基本は同じです。

 const AnimatedAlign({
    Key? key,
    required this.alignment,
    this.child,
    this.heightFactor,
    this.widthFactor,
    Curve curve = Curves.linear,
    required Duration duration,
    VoidCallback? onEnd,
  })

animated_align_page.dart

AnimatedOpacity

AnimatedOpacity は、子Widgetの透明度のグラデーションアニメーションを実行させることができます。透明度値のopacity とアニメーションの時間duration を渡す必要があります。また、アニメーションの曲線curveやアニメーションの終了時に呼び出されるコールバックonEndを設定することもできます。childには、透明度のグラデーションアニメーションを適用したい子Widgetを指定します。

  const AnimatedOpacity({
    Key? key,
    this.child,
    required this.opacity,
    Curve curve = Curves.linear,
    required Duration duration,
    VoidCallback? onEnd,
    this.alwaysIncludeSemantics = false,
  })

animated_opacity_page.dart

TweenAnimationBuilder

TweenAnimationBuilder では、tween と builder callBack builderを渡す必要があります。Tween の変化に応じて、builder callBackが呼び出され、Widgetが再構築され、アニメーションが実行されます。ImplicitlyAnimatedWidget家族は１４個しかないから、それ以外の属性をアニメーションしたい場合はTweenAnimationBuilder を使いましょう。

  const TweenAnimationBuilder({
    Key? key,
    required this.tween,
    required Duration duration,
    Curve curve = Curves.linear,
    required this.builder,
    VoidCallback? onEnd,
    this.child,
  })

下記の例ではTweenAnimationBuilder でAnimatedAlign と同じ効果のアニメーションを作りました。builder callBackで位置属性AlignmentGeometryの変化でアニメーションを実現させました。

return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 300,
              width: 300,
              color: Colors.lightGreen,
              child: TweenAnimationBuilder(
                duration: const Duration(milliseconds: 2000),
                tween: tween,
                builder: (_, AlignmentGeometry alignment, child) {
                  return Align(
                    alignment: alignment,
                    child: const Icon(
                      Icons.ac_unit,
                      color: Colors.red,
                      size: 25,
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );

tween_animation_builder_page.dart