Flutter - Using RotationTransition Widget Examples

This tutorial shows you how to use RotationTransition widget in Flutter.

If you're using Fluter and you want to apply rotation animation to a widget, you can use a widget called RotationTransition. Just like other Transition widgets, you need to define the Animation. In this tutorial, I'm going to show you how to use the widget as well as how to set up the animation.

Creating RotationTransition Animation

Here's the constructor to use.

  const RotationTransition({
    Key key,
    @required Animation<double> turns,
    this.alignment = Alignment.center,
    this.child,
  })

You have to pass an Animation<double> as turns which defines the animation to be played. First, you need to create an AnimationController and your class needs to extend State with TickerProviderStateMixin. That's required so that you can pass this as vsync argument in the constructor of AnimationController.

To control how many degrees the rotation should be, including the initial and final degrees, you need to set the values for lowerBound, upperBound, and value. lowerBound is the smallest value for the animation at which this animation is deemed to be dismissed, defaults to 0.0. upperBound is the largest value for the animation at which this animation is deemed to be completed, defaults to 1.0. value is the initial value of the animation, defaults to lowerBound. For rotation transition, a value of 0.5 means half a rotation (180°), a value of 1.0 means a full rotation (360°), and so on. To set how long the animation should be played, you need to pass an instance of Duration as duration argument.

Having the AnimationController, you need to create the animation. For example, you can create a CurvedAnimation by passing the controller as parent. You can also set the curve to select the animation curve to be used.

Don't forget to dispose the controller inside dispose().

The below example creates a simple rotation transition starting at 90° and ending at 180° that runs for 2000 ms.

  import 'package:flutter/material.dart';
  import 'package:flutter/animation.dart';
  
  class _RotationTransitionExampleState extends State<_RotationTransitionExample> with TickerProviderStateMixin {
  
    AnimationController _controller;
    Animation<double> _animation;
  
    initState() {
      super.initState();
      _controller = AnimationController(
          duration: const Duration(milliseconds: 2000),
          vsync: this,
          value: 0.25,
          lowerBound: 0.25,
          upperBound: 0.5
      );
      _animation = CurvedAnimation(parent: _controller, curve: Curves.linear);
  
      _controller.forward();
    }
  
    @override
    dispose() {
      _controller.dispose();
      super.dispose();
    }
  
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Center(
          child: RotationTransition(
            turns: _animation,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children:[
                Text('Woolha.com', style: TextStyle(color: Colors.teal, fontSize: 36))
              ]
            )
          ),
        ),
      );
    }
  }

Output:

Flutter - RotationTransition - Basic

 

Setting Alignment

You can set the alignment of the coordinate system's origin by passing alignment argument. The passed value is relative to the size of the box. If you don't pass the argument like the previous example, Alignment.center will be used.

  RotationTransition(
    turns: _animation,
    alignment: Alignment(0.1, 0.1),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children:[
        Text('Woolha.com', style: TextStyle(color: Colors.teal))
      ]
    )
  )

Output:

Flutter - RotationTransition - Alignment

 

Full Code

Below is the full code for this tutorial.

  import 'package:flutter/material.dart';
  import 'package:flutter/animation.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        home: _RotationTransitionExample(),
      );
    }
  }
  
  class _RotationTransitionExample extends StatefulWidget {
    _RotationTransitionExampleState createState() => _RotationTransitionExampleState();
  }
  
  class _RotationTransitionExampleState extends State<_RotationTransitionExample> with TickerProviderStateMixin {
  
    AnimationController _controller;
    Animation<double> _animation;
  
    initState() {
      super.initState();
      _controller = AnimationController(
          duration: const Duration(milliseconds: 2000),
          vsync: this,
          value: 0.25,
          lowerBound: 0.25,
          upperBound: 0.5
      );
      _animation = CurvedAnimation(parent: _controller, curve: Curves.linear);
  
      _controller.forward();
    }
  
    @override
    dispose() {
      _controller.dispose();
      super.dispose();
    }
  
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Center(
          child: RotationTransition(
            turns: _animation,
            alignment: Alignment(0.1, 0.1),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children:[
                Text('Woolha.com', style: TextStyle(color: Colors.teal, fontSize: 36))
              ]
            )
          ),
        ),
      );
    }
  }

Output:

Flutter - RotationTransition - Alignment

 

RotationTransition Properties

  • Key key: The widget's key, used to control if it should be replaced.
  • Animation<double> turns *: The animation that controls the rotation of the child.
  • Alignment alignment : The alignment of the coordinate system's origin relative to the size of the box where the rotation will occur around which. Defaults to Alignment.center.
  • Widget child: The widget under this widget in tree where the animation will be applied.

*: required

 

You can also read about: