[Flutter]透明にするアニメーションをする方法

Flutter

2021.10.12

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

ウェジェットを透明にするアニメーションをする方法を紹介します。

方法
まとめ

方法

透明にするアニメーションをするには、「AnimatedOpacity」ウェジェットを使います。

AnimatedOpacityは、透明度が変わった時に自動的にアニメーションをしてくれるウェジェットです。

このAnimatedOpacityを使うには、まずbool型の変数を用意します。

bool isFade = false;

次に、AnimatedOpacityの引数「opacity」を、bool値を使って切り替えます。

        AnimatedOpacity(
          opacity: isFade ? 0 : 1, //isFadeがtrueなら透明、falseなら不透明
          duration: Duration(seconds: 1), //アニメーションの時間
          child: Container(
            color: Colors.red,
            width: 100,
            height: 100,
          ),
        ),

引数「child」に透明にしたいウェジェットを指定します。

最後に、用意した変数を透明にしたいときに、変えれば透明にするアニメーションをすることが出来ます。

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        AnimatedOpacity(
          opacity: isFade ? 0 : 1,
          duration: Duration(seconds: 1),
          child: Container(
            color: Colors.red,
            width: 100,
            height: 100,
          ),
        ),
        TextButton(
          onPressed: () => setState(() => isFade = !isFade),
          child: Text('Fade!'),
        )
      ],
    ));
  }