Rotational Transition In flutter

A RotationTransition in Flutter is a widget used to apply a smooth rotational (spinning) animation to another widget over a given period. This can be useful for creating dynamic visual effects like rotating icons, loading spinners, or rotating any UI element.

How RotationTransition Works:

• The RotationTransition widget takes an Animation<double> as its input, where the value of the animation represents the angle of rotation.
• The rotation value is measured in radians. A complete rotation (360 degrees) corresponds to 2π radians.
• The widget rotates around a pivot point (which can be customized using the alignment property).

Properties of RotationTransition:

1. turns: This is the main property, which takes an Animation<double>. It determines the rotation in radians, with values ranging from 0 (no rotation) to 1 (a full rotation of 360 degrees or 2π radians).
2. alignment: Specifies the point around which the widget rotates. The default value is Alignment.center, meaning the widget rotates around its center. You can change this to rotate around different points (e.g., Alignment.topLeft).
3. child: The widget that you want to apply the rotation animation to, such as an icon, image, or button.\

Alignment Customization:

You can adjust the alignment property of the RotationTransition to change the point around which the widget rotates. For example:

• Alignment.center: Rotates around the center of the widget (default).
• Alignment.topLeft: Rotates around the top-left corner.
• Alignment.bottomRight: Rotates around the bottom-right corner.

Example

import 'package:flutter/material.dart';

class RotationTransitionScreen extends StatefulWidget {
  const RotationTransitionScreen({Key? key, required BoxDecoration decoration}) : super(key: key);

  @override
  _RotationTransitionScreenState createState() => _RotationTransitionScreenState();
}

class _RotationTransitionScreenState extends State<RotationTransitionScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("RotationTransition Example"),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.deepPurple, Colors.orangeAccent],
              begin: Alignment.topLeft,
              end: Alignment.topRight,
            ),
          ),
        ),
      ),
      body: Center(
        child: RotationTransition(
          turns: _animation,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}