CODEWITHSUNDEEP
flutterdartflutter-animation
user13489394
user13489394

Reputation:

How to rotate a widget in Flutter?

Is there any way to animate rotation of a widget? I tried RotatedBox but it didn't work.

Upvotes: 2

Views: 1070

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 268454

Use AnimatedBuilder

AnimatedBuilder(
  animation: _animation, // pass AnimationController to it
  child: YourContainer(),
  builder: (_, child) {
    return Transform.rotate(
      angle: _animation.value * play_around_with_values,
      child: child,
    );
  },
)

Screenshot:

enter image description here

Full code:

class _MainPageState extends State<MainPage> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2))..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (_, child) {
            return Transform.rotate(
              angle: _controller.value * 2 * math.pi,
              child: child,
            );
          },
          child: FlutterLogo(size: 200),
        ),
      ),
    );
  }
}

Upvotes: 4

Related Questions