CODEWITHSUNDEEP
flutterdart
A.A
A.A

Reputation: 4161

Flutter rotate widget

How can I rotate the following icon 180 degree? (I want to animate it later and RotationTransition is not good choice for me)

Icon(Icons.keyboard_arrow_down)

Upvotes: 3

Views: 869

Answers (2)

Nuqo
Nuqo

Reputation: 4091

Here's how to animate a rotation, you could also stop the animation at 180° with the animationController:

import 'package:flutter/material.dart';

void main() {
  runApp(new IconRotate());
}

class IconRotate extends StatefulWidget {
  @override
  _IconRotateState createState() => new _IconRotateState();
}

class _IconRotateState extends State<IconRotate>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this, //for using only a single AnimationController
      duration: new Duration(seconds: 5),
    );

    animationController.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      alignment: Alignment.center,
      color: Colors.white,
      child: new AnimatedBuilder(
        animation: animationController,
        child: new Container(
          height: 150.0,
          width: 150.0,
          child: Icon(Icons.keyboard_arrow_down),
        ),
        builder: (BuildContext context, Widget _widget) {
          return new Transform.rotate(
            angle: animationController.value * 6.3,
            child: _widget,
          );
        },
      ),
    );
  }
}

Upvotes: 0

Miguel Ruivo
Miguel Ruivo

Reputation: 17776

Hello you can do it by simply using the Transform widget.

 Transform.rotate(
      angle: pi, // in radians
      child: Icon(Icons.keyboard_arrow_down),
  );

Upvotes: 1

Related Questions