Search code examples
flutterdartflutter-container

Flutter rotated text not filling available space


I have a container holding some text and when the text is normal horizontal position it is split into 2 lines as it does not fit in a single line, which I understand:

Container(
                    width: 30,
                    height: 250,
                    color: Color.fromRGBO(254, 242, 0, 1),
                    child: Center(
                      child: Text(
                        "dB per H",
                        style: TextStyle(
                          fontSize: 12,
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),

This will be rendered as:

enter image description here

Now I am rotating the text so it is rendered in vertical direction, where the container has plenty of space. However it is still split in 2 lines, when the expected is that now it would fit with no problem.

How to fix this?

Container(
                    width: 30,
                    height: 250,
                    color: Color.fromRGBO(254, 242, 0, 1),
                    child: Center(
                      child: Transform.rotate(
                        angle: -pi / 2,
                        child: Text(
                          "dB per H",
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.black,
                          ),
                        ),
                      ),
                    ),
                  ),

This will be rendered as:

enter image description here


Solution

  • import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: Text('Title')),
            body: Container(
              width: 30,
              height: 250,
              color: Color.fromRGBO(254, 242, 0, 1),
              child: Center(
                child: RotatedBox(
                  quarterTurns: 3,
                  child: Text(
                    "dB per H",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }
    

    enter image description here