[Flutter]Containerのサイズを変える(resize)アニメーション(animation)をするには？

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

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

方法

Containerのサイズを変えるアニメーションをするには、Containerの代わりにAnimaterContainerを使います。

AnimatedContainerは、アニメーションの機能がついたContainerです。

まず、サイズを変えるための変数を用意します。

var _isChanged = false;

そして、AnimatedContainerの引数「width」で横幅、引数「hegiht」で高さを設定します。

この横幅と高さは、用意した変数と三項演算子で切り替わるようにします。

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

AnimatedContainer(
  duration: Duration(/*アニメーションの時間*/),
  width: _isChanged ? /*アニメーション後の横幅*/ : /*アニメーション前の横幅*/,
  height: _isChanged ? /*アニメーション後の高さ*/ : /*アニメーション前の高さ*/,
),

AnimatedContainerは、サイズを変えると自動的にアニメーションが起こります。

最後にボタンなどで変数の値を切り替える処理をします。

ElevatedButton(
  onPressed: () {
    setState(() {
      _isChanged = !_isChanged;
    });
  },
  child: Text('Change'),
),

これでContainerでサイズを変えるアニメーションをすることが出来ます。

以下は、例です。

使用例

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var _isChanged = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            AnimatedContainer(
              duration: Duration(seconds: 2), //２秒
              curve: Curves.bounceIn,
              width: _isChanged ? 200 : 100,
              height: _isChanged ? 300 : 50,
              color: Colors.pink,
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _isChanged = !_isChanged;
                });
              },
              child: Text('Change'),
            ),
          ],
        ),
      ),
    );
  }
}