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

Flutter

2021.10.16

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

アイコンを変えるアニメーションをする方法を紹介します。

方法
1. AnimatedIcon
2. 切り替えるアニメーションのウェジェット
まとめ

方法

アイコンを変えるアニメーションをする方法は、２つあります。

AnimatedIconウェジェット：あらかじめ用意されたアイコンの切り替えアニメーション
切り替えるきりアニメーションのウェジェット

AnimatedIcon

１つは、「AnimatedIconウェジェット」を使う方法です。

このウェジェットは、変換することのできるAnimatedIconsというアイコンを使って、アニメーションをします。

このウェジェットを使うには、AnimationControllerを用意し、「AnimatedIcon」に設定します。

また、AnimatedIconsからアイコンの指定をします。

AnimationController    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
・・・・

AnimatedIcon(
  icon: AnimatedIcons.menu_arrow,//アイコンの指定
  progress: controller,//AnimationControllerの設定
  semanticLabel: 'Label',//ラベル
)

切り替えるアニメーションのウェジェット

もう１つは、切り替えるアニメーションのウェジェットを使う方法です。

切り替えるアニメーションをするウェジェットには、AnimatedCrossFadeやAnimatedSwitcherをなどがあります。

これらのウェジェットを使うことで、切り替えるアニメーションをすることが出来ます。

以下は、AnimatedCrossFadeを使っている例です。

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        AnimatedCrossFade(
          firstChild: Icon(
            Icons.calendar_today,
            size: 200,
          ),
          secondChild: Icon(
            Icons.note_add,
            size: 200,
          ),
          crossFadeState:
              isFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
          duration: Duration(seconds: 2),
        ),
        TextButton(
          onPressed: () => setState(() => isFirst = !isFirst),
          child: Text('Rotate!'),
        )
      ],
    ));
  }