Animated dots progress

dots.dart

class AnimatedDotsProgress extends StatefulWidget {
  const AnimatedDotsProgress({super.key, this.length = 3});

  final int length;

  @override
  State<AnimatedDotsProgress> createState() => _AnimatedDotsProgressState();
}

class _AnimatedDotsProgressState extends State<AnimatedDotsProgress>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 1000));

    controller.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return DotsProgressTransition(animation: controller, length: widget.length);
  }
}

class DotsProgressTransition extends AnimatedWidget {
  const DotsProgressTransition(
      {super.key, required Animation<double> animation, int length = 3})
      : _length = length,
        super(listenable: animation);
  final int _length;

  Animation<int> get _progress {
    return IntTween(begin: -1, end: _length - 1).animate(CurvedAnimation(
        parent: listenable as Animation<double>, curve: Curves.easeIn));
  }

  @override
  Widget build(BuildContext context) {
    final progressValue = _progress;
    return Row(
      children: List.generate(
        _length,
        (index) => _dot(index <= progressValue.value),
      ),
    );
  }

  Widget _dot(bool isFilled) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 200),
      height: 10,
      width: 18,
      decoration: ShapeDecoration(
        shape: const CircleBorder(),
        color: isFilled ? Colors.pink : Colors.grey,
      ),
    );
  }
}