[Flutter]SliderTransitionの使い方

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

SliderTransitionを使うには、どうしたらいいのでしょうか？

使い方

SliderTransitionを使うには、まずアニメーションに必要な変数を用意します。

  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の引数「opacity」に用意したAnimation<Offset>型の変数を指定します。

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

これでSliderTransitionを使うことが出来ます。

最後に、タップやスワイプなどのトリガーで用意した関数を呼び出せば、SliderTransitionでアニメーションをすることが出来ます。

        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!'),
        )
      ],
    ));
  }
}