main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SquareAnimation(),
    );
  }
}

class SquareAnimation extends StatefulWidget {
  @override
  State<SquareAnimation> createState() {
    return SquareAnimationState();
  }
}

class SquareAnimationState extends State<SquareAnimation> {
  static const squareSize = 50.0;
  bool isLeft = true;
  bool isAnimating = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 100,
          child: AnimatedAlign(
            alignment: isLeft ? Alignment.centerLeft : Alignment.centerRight,
            duration: const Duration(seconds: 1),
            onEnd: () => setState(() {
              isAnimating = false;
            }),
            child: Container(
              width: squareSize,
              height: squareSize,
              decoration: BoxDecoration(
                color: Colors.red,
                border: Border.all(),
              ),
            ),
          ),
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: isLeft || isAnimating
                    ? null
                    : () => setState(() {
                          isLeft = true;
                          isAnimating = true;
                        }),
                child: const Text("To the left")),
            ElevatedButton(
                onPressed: isLeft && !isAnimating
                    ? () => setState(() {
                          isLeft = false;
                          isAnimating = true;
                        })
                    : null,
                child: const Text("To the right"))
          ],
        )
      ],
    );
  }
}