[Flutter]AnimatedIconの使い方

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

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

使い方

AnimatedIconは、次の２つの引数を指定して使います。

• icon : アイコンを指定（AnimatedIconという特殊なアイコン）
• progress：アニメーション、もしくはアニメーションコントローラを指定

引数「icon」には、アニメーション用のアイコン「AnimatedIcons」を指定します。

そして、progressでは、アニメーション、もしくはアニメーションを操作するためのAnimationControllerを指定します。

使用例

まず、変数の準備とその初期化を行います。

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

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AnimatedIcon(
                icon: AnimatedIcons.add_event,
                progress: _controller
         ),
          ElevatedButton(
              onPressed: () {
                _controller.forward(); //アニメーションの開始
              },
              child: Text('animate!')
           )
        ],
      ),

アニメーションの開始は、forwardメソッドを使って行います。

全体のコード

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AnimatedIcon(icon: AnimatedIcons.add_event, progress: _controller),
          ElevatedButton(
              onPressed: () {
                _controller.forward();
              },
              child: Text('animate!'))
        ],
      ),
    );
  }
}