[Flutter]スライドアニメーション(slide animation)をするには？

どうも、ちょげ(@chogetarou)です。

スライドアニメーションをする方法を紹介します。

方法
使用したコード

方法

ウェジェット

スライドアニメーションをするには、SlideTransitionウェジェットを使います。

SlideTransition(
Offset position ,
bool? transformHitTests,
Widget? child,
TextDirection? textDirection,
)

position : オフセット（ウェジェットの位置）
transformHitTests : テストをするかどうかを指定。基本的には「false」に設定。
child : 表示するウェジェット
textDirection : x軸の方向。基本的に指定する必要はない

準備

アニメーションをするためには、まず必要な変数を用意します。

  late AnimationController _controller;
  late Animation<Offset> _slideAnimation;

次に、initStateで変数の初期化をします。

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );

    _controller.addListener(() {
      setState(() {});
      print(_controller.value);
    });

    _slideAnimation = Tween<Offset>(begin: Offset(-1, 0), end: Offset(1, 0))
        .animate(_controller);
  }

そして、disposeでAnimationControllerの破棄をします。

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

最後に、アニメーションをするための関数を用意します。

  void _animationChange() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

アニメーション

アニメーションをするには、まず「SlideTransition」に用意した変数を設定します。

        SlideTransition(
          position: _slideAnimation,
          transformHitTests: false,
          child: Icon(
            Icons.flutter_dash_sharp,
            size: 100,
          ),
        )

そして、タップやスワイプなどのトリガーに対して、関数を設定します。

        TextButton(
          onPressed: _animationChange,
          child: Text('Slide!'),
        )

これでアニメーションをすることが出来ます。

使用例

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        SlideTransition(
          position: _slideAnimation,
          transformHitTests: false,
          child: Icon(
            Icons.flutter_dash_sharp,
            size: 100,
          ),
        ),
        TextButton(
          onPressed: _animationChange,
          child: Text('Slide!'),
        )
      ],
    ));
  }

使用したコード

class Sample extends StatefulWidget {
  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _slideAnimation;

  void _animationChange() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );

    _controller.addListener(() {
      setState(() {});
      print(_controller.value);
    });

    _slideAnimation = Tween<Offset>(begin: Offset(-1, 0), end: Offset(1, 0))
        .animate(_controller);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        SlideTransition(
          position: _slideAnimation,
          transformHitTests: false,
          child: Icon(
            Icons.flutter_dash_sharp,
            size: 100,
          ),
        ),
        TextButton(
          onPressed: _animationChange,
          child: Text('Slide!'),
        )
      ],
    ));
  }
}