[Flutter]インジケータ(indicator)のアニメーション(animation)を作る(create)には？

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

インジケータのアニメーションを作る方法を紹介します。

方法
まとめ

方法

インジケータのアニメーションを作るには、AnimationControllerを使います。

まず、StatefulWidgetでSingleTickerProviderStateMixinを使えるようにします。

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
    ・・・・・
}

次に、AnimationControllerの変数を用意し、initStateで初期化、disposeでインスタンスの破棄をします。

  AnimationController? _animationController;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      vsync: this,
      duration: Duration(/*時間*/),
    )
      ..addListener(() {
        setState(() {});
      })
      ..repeat();
  }

  @override
  void dispose() {
    _animationController?.dispose();
    super.dispose();
  }

AnimationControllerを初期化する際に、アニメーションの時間や値の設定をします。

最後に、CircularProgressIndicatorもしくはLinearProgressIndicatorの引数「value」に、AnimationControllerの値を指定します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: LinearProgressIndicator(
          value: _animationController!.value,
        ),
      ),
    );
  }

これでインジケータのアニメーションを作ることが出来ます。