How to implement Rotation Transition in Flutter

In this guide, we are going to learn the concept of a Rotation Transition, how to implement it in Flutter and we will look at examples of a Rotation Transition. first of all, we should know what is animation.

Also read: Flutter Draggable And DragTarget

Animations are one of the essential parts of making the UI of a mobile application feel natural and smooth to the user. Smooth transitions and interactive elements generally make an app pleasant to use. Similarly, On the other hand, badly made animations can make the app look clumsy or worse, & break the application altogether. For this reason, learning the fundamentals of animations in any framework is an essential step towards delivering a superior user experience.

Transform.rotate(
  angle: 1.0,
  child: Container(
    height: 200.0,
    width: 200.0,
    color: Colors.blue,
  ),
),

The angle parameter lets us set an angle (in radians) for the child. The widget also allows us to specify an origin for the rotation of our widget. We specify the origin using the origin parameter. This takes an Offset. The Offset notes the distance of the origin in relation to the center of the child itself.

Creating a Rotation Transition Animation

Let’s take a basic example of how to use a Rotation Transition in our application.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TextScreen(),
    );
  }
}

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

  @override
  State<TextScreen> createState() => _TextScreenState();
}

class _TextScreenState extends State<TextScreen>
    with SingleTickerProviderStateMixin {
   late Animation<double> animation;
  late AnimationController controller;
  late Animation colorAnimation;

  @override
  void initState() {
    super.initState();
    controller =  AnimationController(
      duration: const Duration(seconds:5 ),
      vsync: this);
    animation = Tween<double>(begin: 0.0, end:4.0 ).animate(controller);
    controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Rotation Transition'),
        centerTitle: true,
        backgroundColor: Colors.teal,
      ),
      body: Column(
        children: [
           Transform.rotate(
            alignment: Alignment.center,
            angle: 1,
            origin: const Offset(50.0, 50.0),
            child: Container(
              height: 200.0,
              width: 200.0,
              color: Colors.red,
            ),
          ),
          const SizedBox(
            height: 30,
          ),
         RotationTransition(
         turns: animation,
              child: const Center(
          child: Image(
          image: AssetImage("https://scontent.fktm8-1.fna.fbcdn.net/v/t39.30808-6/262951063_4473265099459320_7674897967916414703_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=reWiQX3MrJYAX8D9BI_&tn=8cvU-xCDYc34zfNx&_nc_ht=scontent.fktm8-1.fna&oh=00_AT-jym4u-RDEKdmSU_5s1i2tYW9IOW74V7IGTX5KxM4kxg&oe=61D7E1BC") ,
           fit: BoxFit.cover,
           width: 200,
           height: 200,
          ),
        ),
      ),
        ],
      ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below.

rotation-transition
rotation-transition

Thank you for reading the guide on Rotation transition in Flutter.

Read about Lottie animations in Flutter here.

Tags: