4

I have this code that makes the icon rotate clockwise. I want to make it rotate anticlockwise. how can I do that?

    animationController =
    AnimationController(vsync: this, duration: Duration(seconds: 3))
      ..repeat(reverse: true);

RotationTransition(
            turns: animationController,
            child: Icon(Icons.settings_sharp),
            alignment: Alignment.center,
          )

2 Answers 2

8

Concerning RotationTransition widget rotation direction is manipulated by turns property.

When widget rotates clockwise controllers value goes from 0.0 to 1.0.

To rotate in opposite direction you need value to go from 1.0. to 0.0.

To achieve that, you can set up Tween:

final Tween<double> turnsTween = Tween<double>(
    begin: 1,
    end: 0,
  );

And animate this tween in turns property with any AnimationController you need:

child: RotationTransition(
    turns: turnsTween.animate(_controller),
    ...

Sample result and code to reproduce:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 4),
    vsync: this,
  )..repeat();

  final Tween<double> turnsTween = Tween<double>(
    begin: 1,
    end: 0,
  );

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RotationTransition(
          turns: turnsTween.animate(_controller),
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: FlutterLogo(size: 150.0),
          ),
        ),
      ),
    );
  }
}
2

You can add in an AnimationBuilder and Animation object and set the end Tween property to negative.

Also, It looked like you were attempting to have the widget reverse rotation upon completion in a cycle? If so, I added in the code for that too if it helps :)

For example:

 @override
  void initState() {
    _controller =
    AnimationController(vsync: this, duration: Duration(seconds: 3))
    
//To have the widget change rotation direction upon completion
..addStatusListener((status) {
      if(status == AnimationStatus.completed)
      _controller.reverse();
      if(status == AnimationStatus.dismissed){
        _controller.forward();
      }
    });


  _animTurn = Tween<double>(begin: 0.0, end: -1.0).animate(_controller);

    
    _controller.forward();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return
          RotationTransition(
            turns: _animTurn,
            child: Icon(Icons.settings_sharp,size: 100,),
            alignment: Alignment.center,
          );
        });
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.