[Flutter]Containerを動かす(move)アニメーション(animation)をする方法

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

Containerを動かすアニメーションをする方法を紹介します。

方法

Containerを動かすアニメーションをするには、AnimatedPositionとStackを使います。

まず、位置を切り替えるための変数を用意します。

var _isChanged = false;

次に、Stackを用意します。

Stack(
  children: [],
),

そして、AnimatedPositionedをStackのchildrenに指定します。

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

Stack(
  children: [
    AnimatedPositioned(
      duration: Duration(/*アニメーションの時間*/),
      child: Container(),
    ),
  ],
),

次に、AnimatedPositionedの次のいずれかの引数と用意した変数を使い、Containerの位置が切り替わるようにします。

left : 左からの距離
top : 上からの距離
bottom : 下からの距離
right : 右からの距離

ここでは、左上から位置を指定するために、引数「top」と引数「left」を使います。

Stack(
  children: [
    AnimatedPositioned(
      left: _isChanged ? /*移動後の位置*/ : /*移動前の位置*/,
      top: _isChanged ? /*移動後の位置*/ : /*移動前の位置*/,
      duration: Duration(/*アニメーションの時間*/),
      child: Container(),
    ),
  ],
),

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

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

これで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: Stack(
        children: [
          AnimatedPositioned(
            left: _isChanged ? 180 : 0,
            top: _isChanged ? 650 : 0,
            duration: Duration(seconds: 2),
            child: Container(
              height: 200,
              width: 200,
              color: Colors.blue,
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: ElevatedButton(
              onPressed: () {
                setState(() {
                  _isChanged = !_isChanged;
                });
              },
              child: Text('Move'),
            ),
          )
        ],
      ),
    );
  }
}