Flutter Animation: How to Rotate a Circle in the Flutter

Flutter Animation: In this article, we will see how can we rotate a circle with animation in the Flutter. Flutter has an “AnimationController” to control the animation and an “AnimatedBuilder” to build means to show the animation on the screen of any widget. We can use the AnimationController and its properties like duration, curve, and more…

Flutter: Rotate A Circle

To rotate a circle with animation in Flutter, you can use the AnimationController and AnimatedBuilder widget, and the Transform widget. This widget allows you to apply a transformation to its child widget, such as scaling, rotating, or translating it.

Here’s an example of how you can use Transform to rotate a circle:

First, we will create a class that name will be “RotateCircleScreen” under the rotate_circle_screen.dart file. This class should be a stateful widget.

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 would use the AnimationController widget to give the animation to the widget and will provide the duration and angle of animation in this widget. In this, I will give the animation type repeat, which you can use to your own requirements.

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

Then, under the “Scaffold” widget, we will use the AnimatedBuilder widget, which will build the animation of the widget by calling the animation variable that we declare at the top.

AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Transform.rotate(
              angle: _animation.value * math.pi / 180,
              child: Container(
                width: 300,
                height: 300,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.red,
                ),
                child: const Center(
                  child: FlutterLogo(size: 200),
                ),
              ),
            );
          },
        ),

Output:

In this example, we use AnimationController to animate the rotation of a red circle. The circle starts at 0 degrees and rotates to 360 degrees, and then repeats indefinitely. You can customize the animation by changing the duration, curve, and other properties of the AnimationController.

Note that we use the AnimatedBuilder widget to build the animated widget. This widget allows you to rebuild the widget whenever the animation changes, so you can update the widget’s properties based on the animation value.

The Transform.rotate widget takes an angle in radians, so we need to convert the animation value from degrees to radians using math.pi constant.

Source: Lottie.com

Complete Source Code:

/// main

import 'package:circle_rotate/rotate_circle_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: RotateCircleScreen(),
    );
  }
}


//// rotate circle screen


import 'package:flutter/material.dart';
import 'dart:math' as math;

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

  @override
  State<RotateCircleScreen> createState() => _RotateCircleScreenState();
}

class _RotateCircleScreenState extends State<RotateCircleScreen> 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: 0,
      end: 360,
    ).animate(_animationController);
    _animationController.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Transform.rotate(
              angle: _animation.value * math.pi / 180,
              child: Container(
                width: 300,
                height: 300,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.red,
                ),
                child: const Center(
                  child: FlutterLogo(size: 200),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}