Flutter如何防止孩子与父母一起旋转？

Question

How to prevent a child Text from Rotating along with Parent?

This is sample code of what I have. I do not want the Text widget to rotate along with the parent Container. Is there an efficient way of doing it? Else I may have to wrap the child Text in another Transform.rotate and rotate it back.

class MyRotateContainer extends StatefulWidget {
@override
  _MyRotateContainerState createState() => new _MyRotateContainerState();
}

class _MyRotateContainerState extends State<MyRotateContainer> {
@override
Widget build(BuildContext context) {
  return new Transform.rotate(
    angle: (30.0 * PI / 180.0),
    child: new Container(
      child: new Text(
        'SOME TEXT',
        textScaleFactor: 2.0,
      ),
    ));
 }
}

Answer 1

The solution to the rotation problem is quite simple. You can add a second Transform.rotate , wrapping your Text Widget as seen in the code below. I added red color to the Container to display the rotated Container .

Before adding the second rotate:

After adding the second rotate:

class MyRotateContainer extends StatefulWidget {
  @override
  _MyRotateContainerState createState() => new _MyRotateContainerState();
}

class _MyRotateContainerState extends State<MyRotateContainer> {
  @override
  Widget build(BuildContext context) {
    double angle = 30.0 * pi / 180.0;

    return Transform.rotate(
      angle: angle,
      child: Container(
        color: Colors.red,
        child: Transform.rotate(
          angle: -angle,
          child: Text(
            'SOME TEXT',
            textScaleFactor: 2.0,
          ),
        ),
      ),
    );
  }
}