Flutter Animation: How to repeat the animation of the circle

Flutter Animation: In this article, we will see how can we repeat the animation of a circle in the Flutter. Flutter has an animation controller to control the animation of any widget. We can use the AnimationController and its properties like duration, curve, and more…

Repeat Animation of Circle

To repeat an animation of a circle in Flutter, you can use the AnimationController class. This class allows you to control the animation, such as starting, stopping, and repeating it.

Here’s an example of how you can use AnimationController to repeat an animation of a circle:

First, we will create a class that name will be “RepeatAnimationScreen” under the repeat_animation_screen.dart file.

we need to initialize two things, first will be the animation controller, and the second will be animation:

  late AnimationController _animationController;
  late Animation<double> _animation;

Then under the init function, we will initialize the Animation Controller with the duration and also will give the size of the animation from where it will begin and which size animation will stop.

Also will give the animation type by using the animation controller variable that we declare at the top of the class like repeat, reverse, stop, and more…

@override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );
    _animation = Tween<double>(
      begin: 50,
      end: 200,
    ).animate(_animationController);
    _animationController.repeat();
  }

Then we will use the AnimationBuilder widget inside the Scaffold widget to show the behavior of animation and circle, that is how the animation will look like:

Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Container(
              width: _animation.value,
              height: _animation.value,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.red,
              ),
            );
          },
        ),
      ),
    )

Output

Flutter animation

In this example, we see how can we animate a circle and repeat its animation using the Animator Builder widget in Flutter. You can customize the animation by changing the duration, curve, color, and other properties according to your requirements.

Source: Lottie.com

Complete source code of Flutter Animation:

/// main screen

import 'package:circle_rotate/repeat_animation_screen.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Circle Rotate',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RepeatAnimationScreen(),
    );
  }
}


/// repeat animation screen 


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

  @override
  State<RepeatAnimationScreen> createState() => _RepeatAnimationScreenState();
}

class _RepeatAnimationScreenState extends State<RepeatAnimationScreen> with SingleTickerProviderStateMixin {

  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );
    _animation = Tween<double>(
      begin: 50,
      end: 200,
    ).animate(_animationController);
    _animationController.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Container(
              width: _animation.value,
              height: _animation.value,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.red,
              ),
            );
          },
        ),
      ),
    );
  }
}