Как мне вращать что-то на 15 градусов в Flutter?

В документах Flutter показан пример поворота "div" на 15 градусов, как для HTML/CSS, так и для кода Flutter:

Код флаттера:

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

И соответствующие части являются new Transform и alignment: FractionalOffset.center и transform: new Matrix4.identity()..rotateZ(15 * 3.1415927/180)

Мне любопытно, есть ли более простой способ повернуть Container в Flutter? Есть ли короткая рука для случая "15 градусов"?

Благодарю!

Ответы

Ответ 1

В мобильных приложениях, я думаю, что это редкость, чтобы начать вещание с поворотом на 15 градусов и просто оставаться там навсегда. Поэтому возможно, что поддержка Flutter для вращения лучше, если вы планируете корректировать вращение с течением времени.

Это похоже на перебор, но RotationTransition с AlwaysStoppedAnimation выполнит именно то, что вы хотите.

screenshot

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

Если вы хотите повернуть что-то на 90, 180 или 270 градусов, вы можете использовать RotatedBox.

screenshot

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

Ответ 2

Вы можете использовать Transform.rotate для поворота вашего виджета. Я использовал Text и повернул его на 45˚ (π/4)

Пример:

Widget build(BuildContext context) {
  return Transform.rotate(angle: - math.pi / 4, child: Text("Text"),);
}

enter image description here

Ответ 3

enter image description here

Если вы работаете с холстом (как в виджете CustomPaint), вы можете повернуть его на 15 градусов следующим образом:

import 'dart:math' as math;

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

    canvas.save();

    // rotate the canvas by 15 degrees
    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);
    final textPainter = TextPainter(text: textSpan, textDirection: TextDirection.ltr);
    textPainter.layout(minWidth: 0, maxWidth: size.width);
    textPainter.paint(canvas, Offset(0, 0));

    canvas.restore();
  }

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

Однако, если вы делаете что-то простое, то я бы использовал RotatedBox или Transform.rotate как предложено в других ответах.