Sliding square using explicit animation

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: SlidingSquarePage()));
}

class SlidingSquarePage extends StatefulWidget {
  const SlidingSquarePage({super.key});

  @override
  State<SlidingSquarePage> createState() => _SlidingSquarePageState();
}

class _SlidingSquarePageState extends State<SlidingSquarePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    )..repeat(reverse: true);

    _animation = Tween<Offset>(
      begin: const Offset(-1.0, 0.0),
      end: const Offset(1.0, 0.0),
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return FractionalTranslation(
              translation: _animation.value,
              child: child,
            );
          },
          child: const ColoredBox(
            color: Colors.green,
            child: SizedBox.square(dimension: 100),
          ),
        ),
      ),
    );
  }
}