Search code examples
fluttervertical-text

Flutter: How to prevent RotatedBox from automatically expanding text to the right?


I'm trying to create a vertical text using the RotatedBox. The widget works well and the text is rotated accordingly, but when the text is too long it is automatically expanded to the right which is not the behavior I wanted.

                    RotatedBox(
                      quarterTurns: -1,
                      child: Tooltip(
                          message: "the long text message when user wants to see it",
                          child: Container(
                            width: 50,
                            child: Text("some long text that is too long to fit",
                              overflow: TextOverflow.fade,
                            ),
                          )),
                    ),    

enter image description here

As shown on the image above, the text isn't clipped using overflow instead it just expands to the right creating that awkward gap. I've tried adding more containers to the RotatedBox, unfortunately it doesn't limit it's size at all.


Solution

  • I fixed this by adding height and width on the container outside the RotatedBox

    Container(
      height: 50,
      width: 20,
      child: RotatedBox(
         quarterTurns: -1,
         child: Tooltip(
           message: "the long text message when user wants to see it",
           child: Text("some long text that is too long to fit",
                       overflow: TextOverflow.fade,
      )),
     ),
    ),