'How do I rotate something 15 degrees in Flutter?

The Flutter docs show an example of rotating a "div" by 15 degrees, both for HTML/CSS and Flutter code:

The Flutter code is:

var container = new Container( // gray box
  child: new Center(
    child:  new Transform(
      child:  new Text(
        "Lorem ipsum",
      ),
      alignment: FractionalOffset.center,
      transform: new Matrix4.identity()
        ..rotateZ(15 * 3.1415927 / 180),
    ), 
  ),
);

And the relevant parts are new Transform and alignment: FractionalOffset.center and transform: new Matrix4.identity()..rotateZ(15 * 3.1415927 / 180)

I'm curious, is there a simpler way to rotate a Container in Flutter? Is there a short-hand for the case of "15 degrees" ?

Thanks!

dartflutterjavaphpencryptionphp-openssl


Solution 1:[1]

You can use Transform.rotate to rotate your widget. I used Text and rotated it with 45? (?/4)

Example:

import 'dart:math' as math;

Transform.rotate(
  angle: -math.pi / 4,
  child: Text('Text'),
)

enter image description here

Solution 2:[2]

enter image description here

If you are working with a canvas (as in a CustomPaint widget), you can rotate 15 degrees like this:

import 'dart:math' as math;

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.save();

    // rotate the canvas
    final degrees = 15;
    final radians = degrees * math.pi / 180;
    canvas.rotate(radians);

    // draw the text
    final textStyle = TextStyle(color: Colors.black, fontSize: 30);
    final textSpan = TextSpan(text: 'Hello, world.', style: textStyle);
    TextPainter(text: textSpan, textDirection: TextDirection.ltr)
      ..layout(minWidth: 0, maxWidth: size.width)
      ..paint(canvas, Offset(0, 0));

    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

However, if you are doing something simple then I would use a RotatedBox or Transform.rotate as suggested by the other answers.

Solution 3:[3]

There is Two Main Flutter Widget available for this functionality, RotationTransition and Transform.rotate

another supported option is RotatedBox but this rotate widget only supports quarter turns, which means they support vertical and only horizontal orientation. and if you rotate already created widgets like Container so for the container by transformAlignmentyou can rotate widget.

  • RotationTransition: which animates the rotation of a widget, mainly we prefer when we need rotation with animation transition.https://api.flutter.dev/flutter/widgets/RotationTransition-class.html
  • Transform.rotate: which applies a rotation paint effect, they Create a widget that transforms its child using a rotation around the center.

RotationTransition Widget example:-

           RotationTransition(
                turns: AlwaysStoppedAnimation(15 / 360),
                child: Text("flutter is awesome")
           )

Transform.rotate Widget example :-

    Transform.rotate(
        angle: 15 * math.pi / 180, 
        child: Text("flutter is awesome")
          )

Solution 4:[4]

Container(
          decoration: BoxDecoration(borderRadius: BorderRadius.circular(50), color: Color(0xffF6F8FF),),
          width: MediaQuery.of(context).size.width*0.6,
          height: MediaQuery.of(context).size.height*0.4,
          alignment:
          new Alignment(0, 0),
          transform:
          new Matrix4.translationValues(MediaQuery.of(context).size.width * 0.55, -250.0, 0.0)
              ..rotateZ(28 * 3.1415927 / 180),
          ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Suragch
Solution 3 shirsh shukla
Solution 4 Jan

Related Questions