Повернутый текст не заполняет доступное пространство

Question

У меня есть контейнер, содержащий некоторый текст, и когда текст находится в нормальном горизонтальном положении, он разделяется на 2 строки, поскольку он не помещается в одну строку, что я понимаю:

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

Это будет отображаться как:

Теперь я поворачиваю текст так, чтобы он отображался в вертикальном направлении, где в контейнере достаточно места. Однако он по-прежнему разделен на 2 строки, хотя ожидается, что теперь он без проблем поместится.

Как это исправить?

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

Это будет отображаться как:

Answer 1

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

Answer 2

Попробуй это

new RotationTransition(
  turns: new AlwaysStoppedAnimation(90 / 360),
  child: Container(
    width: 250,
    height: 60,
    color: Color.fromRGBO(254, 242, 0, 1),
    child: new Center(
      child: new Text("Lorem ipsum"),
    ),
  ),
),

Answer 3

Попробуй это

Column(
    children: <Widget>[
      Container(
        height: 250,
        child: Row(
          children: <Widget>[
            Transform.rotate(
              angle: -pi / 2,
              child: Container(
                width: 250,
                color: Color.fromRGBO(254, 242, 0, 1),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "dB per H",
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.black,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    ],
  ),

Answer 4

Ты можешь использовать height: double.infinity;

return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Title')),
        body: Container(
          width: 30,
          height: double.infinity,
          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,
                ),
              ),
            ),
          ),
        ),
      ),
    );

Answer 5

Итак, сначала рендерится дочерний элемент (определяется высота и ширина), затем Transformwidget применяет преобразование на основе этого. В этом случае поворачивает его наpi/2.
Однако, поскольку до этого высота и ширина дочернего элемента были фиксированными, вращение этого не меняет. Вы можете попробовать поместить текст либо в гибкий виджет, либо в контейнер с фиксированной высотой, чтобы увидеть желаемый результат. Вот пример контейнерного подхода:

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