[Flutter]アイコンの色を変えるアニメーションをする方法

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

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

方法

準備

まず、SingleTickerProviderStateMixinを使用できるStateを用意します。

class _SampleState extends State<Sample> with SingleTickerProviderStateMixin {
　　　　　　・・・
}

次に、アイコンの色を操作するための変数を用意します。

  late AnimationController _controller; //アニメーション操作
  late Animation _colorAnimation; //色のアニメーション操作
  var isChanged = false; //アニメーションの向き

そして、「initState」で、変数の初期化を行います。

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(
　　　　　　　　　duration: Duration(seconds: 1),　//アニメーションの時間
　　　　　　　　　 vsync: this);

    _colorAnimation =
        ColorTween(
         begin: Colors.grey,//最初の色
          end: Colors.pink//アニメーション後の色
       ).animate(_controller);
  }

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

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

最後に、アイコンの色を変えるための関数を用意します。

  void _iconChange() {
    if (isChanged) {
      _controller.reverse(); //逆向きのアニメーション
      setState(() {
        isChanged = false;
      });
    } else {
      _controller.forward(); //アニメーション
      setState(() {
        isChanged = true;
      });
    }
  }

ここまでで準備完了です。

アニメーション

まず、AnimatedBuilderウェジェットを用意します。

AnimatedBuilder(
      animation: _controller,
)

これはアニメーションを行うためのウェジェットです。

そして、引数「child」にアニメーションをするアイコン、引数「builder」で「child」を返します。

AnimatedBuilder(
            animation: _controller,
            child: IconButton(
              onPressed: _iconChange,
              icon: Icon(Icons.favorite),
            ),
            builder: (BuildContext context, child) {
              return child!;
            })

「onPressed」には、用意した関数を指定しています。

最後に、アイコンの色を操作できる引数に「_colorAnimation.value」を指定します。

AnimatedBuilder(
            animation: _controller,
            child: IconButton(
              onPressed: _iconChange,
              icon: Icon(Icons.favorite),
              color: _colorAnimation.value,
            ),
            builder: (BuildContext context, child) {
              return child!;
            })

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

全体のコード

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

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

  void _iconChange() {
    if (isChanged) {
      _controller.reverse();
      setState(() {
        isChanged = false;
      });
    } else {
      _controller.forward();
      setState(() {
        isChanged = true;
      });
    }
  }

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

    _colorAnimation =
        ColorTween(begin: Colors.grey, end: Colors.pink).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
        child: AnimatedBuilder(
            animation: _controller,
            child: IconButton(
              onPressed: _iconChange,
              icon: Icon(Icons.favorite),
              color: _colorAnimation.value,
            ),
            builder: (BuildContext context, child) {
              return child!;
            }));
  }
}