表示非表示をアニメーション付きでハンドリングするWidgetの作り方

はじめに

今回のモチベーションとしては漫画のビューワーなどでフルスクリーン時にAppBarやNavigationBarの表示非表示を行いたいというものです。

実装

今回の例としてはAppBarをAnimation付きでハンドリングするためのものを紹介します。

class AnimationAppBar extends StatelessWidget implements PreferredSizeWidget {
  const AnimationAppBar({
    Key? key,
    required this.child,
    required this.controller,
    required this.visible,
    required this.beginOffset,
    required this.endOffset,
  }) : super(key: key);

  final PreferredSizeWidget child;
  final AnimationController controller;
  final bool visible;
  final Offset beginOffset;
  final Offset endOffset;

  @override
  Size get preferredSize => child.preferredSize;

  @override
  Widget build(BuildContext context) {
    visible ? controller.reverse() : controller.forward();
    return SlideTransition(
      position:
          Tween<Offset>(begin: beginOffset, end: endOffset).animate(
        CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn),
      ),
      child: child,
    );
  }
}

SlideTransition を使用します。プロパティの position にどのようにアニメーションするかを入れます。
そして、それぞれ使いやすいように child を引数に取ることによって使う側でAppBarのUIを決定することができます。
AnimationController を表示非表示のフラグに合わせて controller.reverse() , controller.forward() をします。今回のOffsetとしては begin は controller.reverse() に合わせて Offset.zero を指定し、 end は OffSet(0, -1) を指定しました。