How do I rotate something 15 degrees in Flutter?

Question

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 Contai         


        

Answer 1

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.