Flutter transform rotate inside row / column - flutter

Question

I have a Column with some widgets inside.
If I trying to rotate one of them, it behaves like in the stack widget.
But I want to save layout of the rotated widget inside parent widget.
My question is how to revert (return) layout of the rotated widget inside Column, Row, etc... ?
The explanation and code example:
Right layout without rotation:
right layout screenshot
Column(
children: [
Text('Progress'),
SizedBox(height: 8.0,),
LinearProgressIndicator(
value: _counter / 100,
minHeight: 20,
),
],
)
Wrong layout with rotated widget:
wrong layout screenshot
Column(
children: [
Text('Progress'),
SizedBox(height: 8.0,),
Transform.rotate(
angle: -45 / (180 / pi),
child: LinearProgressIndicator(
value: _counter / 100,
minHeight: 20,
),
),
],
)
Wanted result screenshot
Thanks to Yeasin Sheikh for good idea,
task solved, final code here

Answer 1

Transform widget is just painting on UI, doesn't take actual space. You can wrap with SizedBox to provide the height.
If you can tweak the flexibility of your own from
deg2Ran(double deg) => deg / (180 / pi);
double boxHeight() {
final value = (((500 * deg2Ran(angle))) / (deg2Ran(-45))).abs();
return value < 20 ? 20.0 : value; // 20 your min height
}
class SX extends StatefulWidget {
const SX({Key? key}) : super(key: key);
#override
State<SX> createState() => _SXState();
}
class _SXState extends State<SX> {
double angle = -45;
deg2Ran(double deg) => deg / (180 / pi);
double boxHeight() {
final value = (((500 * deg2Ran(angle))) / (deg2Ran(-45))).abs();
return value < 20 ? 20.0 : value; // 20 your min height
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Slider(
min: -180,
max: 180,
value: angle,
onChanged: (v) {
setState(() {
angle = v;
});
}),
Text('Progress'),
SizedBox(
height: 8.0,
),
SizedBox(
height: boxHeight(),
child: Center(
child: Transform.rotate(
angle: deg2Ran(angle),
alignment: Alignment.center,
child: LinearProgressIndicator(
value: 22 / 100,
minHeight: 20,
),
),
),
),
],
),
);
}
}
You can handle overflow and some decoration