[Flutter]フェードイン(fade in)アニメーション(animation)をする方法

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

フェードインアニメーションをする方法を紹介します。

方法
まとめ
1. 関連

方法

スライドインアニメーションをするには、「AnimatedOpacity」を使います。

AnimatedOpacityは、ウェジェットを透明にしたり不透明にするアニメーションが出来るウェジェットです。

このウェジェットを使うことで、フェードインアニメーションをすることが出来ます。

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

bool isFade = false;

そして、AnimatedOpacityに引数「opacity」で三項演算子を使って、透明度を切り替えられるようにします。

また、durationでアニメーションの時間を設定します。

        AnimatedOpacity(
          opacity: isFade ? 0 : 1,
          duration: Duration(seconds: 1), //アニメーションの時間
        ),

最後に、フェードインをしたいウェジェットを引数「child」に指定します。

        AnimatedOpacity(
          opacity: isFade ? 0 : 1,
          duration: Duration(seconds: 1),
          child: Container(
            color: Colors.red,
            width: 100,
            height: 100,
          ),
        ),

後は、bool型の変数を切り替えれば、フェードインアニメーションをすることが出来ます。

  @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!'),
        )
      ],
    ));
  }