Flutter rotated text not filling available space

Issue

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:

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:

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

Answered By – user10539074

Answer Checked By – Mildred Charles (FlutterFixes Admin)