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!

回答1:

In mobile apps, I think it's kind of rare to have things start out rotated 15 degrees and just stay there forever. So that may be why Flutter's support for rotation is better if you're planning to adjust the rotation over time.

It feels like overkill, but a RotationTransition with an AlwaysStoppedAnimation would accomplish exactly what you want.

new RotationTransition(
  turns: new AlwaysStoppedAnimation(15 / 360),
  child: new Text("Lorem ipsum"),
)

If you want to rotate something 90, 180, or 270 degrees, you can use a RotatedBox.

new RotatedBox(
  quarterTurns: 1,
  child: new Text("Lorem ipsum")
)

回答2:

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'),
)

回答3:

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.

来源：https://stackoverflow.com/questions/44276080/how-do-i-rotate-something-15-degrees-in-flutter

标签

dart

Flutter