I applied Transform.scale, but the aspect ratio is broken and the buttons are popping out. I want to know how to scale all child widgets without breaking them.
I’ve tried setting the width and height on the Container, and I’ve tried to warp with AspectRatio on it. But it always broken when I changed the size of Chrome.
Added, edited
I want to fit the screen. Base size is 590×750.
When I changed to lower than base size, it breaks.
class TestApp extends StatelessWidget {
const TestApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TestPage(),
);
}
}
class TestPage extends StatelessWidget {
const TestPage({super.key});
@override
Widget build(BuildContext context) {
var screenSize = MediaQuery.of(context).size;
var width = screenSize.width;
var height = screenSize.height;
var scaleW = width / 590;
var scaleH = height / 750;
var scaleFit = scaleW < scaleH ? scaleW : scaleH;
scaleFit *= 0.8; //scale for test
print('$width, $height, $scaleW, $scaleH, $scaleFit');
return Stack(
children: [
FilledBox(text: 'screen', color: Colors.white,),
Scaffold(
backgroundColor: Colors.transparent,
body: Align(
alignment: Alignment.center,
child: Transform.scale(
scale: scaleFit,
child: TestMenu(),
),
),
),
],
);
}
}
class FilledBox extends StatelessWidget {
const FilledBox({ super.key, required this.text, required this.color });
final Color color;
final String text;
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
var w = constraints.maxWidth;
var h = constraints.maxHeight;
return Container(
width: w,
height: h,
color: color,
child: Text('$text $w,$h', style: TextStyle(color: Colors.black, fontSize: 30, fontWeight: FontWeight.bold, decoration: TextDecoration.none),),
);
},
);
}
}
class TestMenu extends StatelessWidget {
const TestMenu({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: 590,
height: 750,
color: Colors.black.withOpacity(0.2),
child:
//FilledBox(color: Colors.cyan,),
Dialog(),
);
}
}
class Dialog extends StatelessWidget {
const Dialog({
super.key,
});
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 590,
height: 660,
child: FilledBox(text: 'dialog', color: Colors.green,),
),
SizedBox(
width: 590,
height: 90,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(
onPressed: (){ },
padding: EdgeInsets.zero,
icon: SizedBox(width: 190, height: 90, child: FilledBox(text:'bt', color: Colors.blue,),),
),
IconButton(
onPressed: (){ },
padding: EdgeInsets.zero,
icon: SizedBox(width: 190, height: 90, child: FilledBox(text:'bt', color: Colors.orange,),),
),
IconButton(
onPressed: (){ },
padding: EdgeInsets.zero,
icon: SizedBox(width: 190, height: 90, child: FilledBox(text:'bt', color: Colors.blue,),),
),
],
),
),
],
);
}
}
Added2
If screen size is more than my setting is OK.
[1]: https://i.sstatic.net/65lrOZXB.png
If screen size is less than my setting is not OK.
[2]: https://i.sstatic.net/WSCi5bwX.png
2
Answers
I found the OverflowBox. I wrapped the widget with Overflowbox. And my problem was solved.
I think I asked the wrong question. Because it was a screen size and overflow issue, not a scale issue.
You can easily use ScaleTransition Widget, which is provided by Flutter itself.
Check this out to get to know scaleTransition