[Flutter]色を変えるアニメーションをするには？

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

色を変えるアニメーションをするには、どうしたらいいのでしょうか？

方法

色を変えるアニメーションをするには、AnimatedBuilderを使います。

まず、アニメーションをするための変数を２つ用意します。

  late AnimationController _controller;
  late Animation _colorAnimation; //色を変えるため

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

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

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

    _colorAnimation = ColorTween(
      begin: Colors.red,
      end: Colors.blue,
    ).animate(_controller);
  }

また、disposeでコントローラの破棄をします。

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

そして、AnimatedBuilderを使います。

AnimatedBuilderの引数「child」に指定するウェジェットの色を操作するためには、用意した変数を使います。

        AnimatedBuilder(
          animation: _controller,
          builder: (BuildContext context, child) => child!,
          child: Container(
            color: _colorAnimation.value,
            height: 100,
            width: 100,
          ),
        ),

あとは、タップやスワイプなどのトリガーでアニメーションを操作します。

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

  TextButton(
     onPressed: _animationChange,
     child: Text('Color Change!'),
  )

使用例

 @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        AnimatedBuilder(
          animation: _controller,
          builder: (BuildContext context, child) => child!,
          child: Container(
            color: _colorAnimation.value,
            height: 100,
            width: 100,
          ),
        ),
        TextButton(
          onPressed: _animationChange,
          child: Text('Change Color!'),
        )
      ],
    ));
  }

全体のコード

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

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

  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);
    });

    _colorAnimation = ColorTween(
      begin: Colors.red,
      end: Colors.blue,
    ).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        AnimatedBuilder(
          animation: _controller,
          builder: (BuildContext context, child) => child!,
          child: Container(
            color: _colorAnimation.value,
            height: 100,
            width: 100,
          ),
        ),
        TextButton(
          onPressed: _animationChange,
          child: Text('Change Color!'),
        )
      ],
    ));
  }
}