Question 74848 in Flutter Question posted in
The official Flutter documentation can be found here.

How to rotate an image smoothly in clockwise in Flutter?

im trying to rotate an image in clockwise (seconds) with smooth animation , this my current code :

  Transform.rotate(
          angle: _dateTime.second * 6 * pi / 180,
          child: Image.asset(
            'assets/Clocks/FirstClock/secondhand.png',
          ),
        ),

I’ve tried animation builder and rotation transition but I can’t apply the seconds angle to the animation its always inaccurate

Tags:

2

Answers


  1. 0

    I’m Trying to Solve your Problem :

    Use Transform.rotate For Rotate image smoothly in clockwise:

    Transform.rotate(
      angle: _angleInRadians,
      child: Image.asset('assets/abc.jpg'),
    );

    Code:

    class RotateImage extends StatefulWidget {
  @override
  _RotateImageState createState() => _RotateImageState();
}

class _RotateImageState extends State<RotateImage>
    with TickerProviderStateMixin {
  late Ticker _ticker;
  double _angleInRadians = 0;

  @override
  void initState() {
    super.initState();
    _ticker = this.createTicker((_) => setState(() {
      _angleInRadians += 0.01;
    }))
      ..start();
  }

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

  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: _angleInRadians,
      child: Image.asset('assets/abc.jpg'),
    );
  }
}

    Video

    Login or Signup to reply.
  2. 0

    First make a statefulwidget
    It takes two parameters the image provider and the duration. Pass the parameterss in the constructor.

    In the state class put a animatedController

    late AnimationController _controller;

    Then in the initState initialize the controller.

    _controller = AnimationController(
  vsync: this,
  duration: Duration(seconds: 
widget.duration.toInt()),
)..repeat();

    Then inside your build method put

    RotationTransition(
    turns: Tween(begin: 0.0, end: 
    1.0).animate(_controller),
    child: Image(
    image: widget.imageProvider,
  ),
),

    You can finally call the dispose method
    To dispose the controller

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search