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