Flutter rotated text not filling available space
1,269
Solution 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,
),
),
),
),
),
),
);
}
}
Solution 2
try this
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"),
),
),
),
![codeKiller](https://i.stack.imgur.com/mfshI.jpg?s=256&g=1)
Author by
codeKiller
Updated on December 14, 2022Comments
-
codeKiller over 1 year
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:
-
meditat over 4 yearstry adding a property to
Text
maxLines: 1
-
aswin darma over 4 yearsi think you need to find another alternative, when you rotate the text, the max width of the text is following the container width
-
codeKiller over 4 years@aswindarma ok, what other alternative??
-
-
codeKiller over 4 yearseven though i have not tested all the other proposed solutions, and even though you have not added any further explanation, your solution works with the minimum changes so i accept your answer. Thanks