Every Mobile Application requires to set Fix Height/Width. While Applying Height/Width to a particular Screen the Developer needs to make sure that it doesn’t get an Overflow Error. In this article, we will learn about How to Freeze Elements to Percentage of Screen Width/Height in Flutter?
How to Freeze Elements to Percentage of Screen Width/Height in Flutter??
- Using MediaQuery :
You can also read the screen width directly out of MediaQuery.of(context).size and create a sized box based on that.
Container( width: MediaQuery.of(context).size.width * 0.50, height: MediaQuery.of(context).size.height*0.50, color: Colors.blueAccent[400], )
We will get output like below:

- Using Expanded Widget
The Expanded Widget allows a widget to fill the available space, horizontally if it is in a row, or vertically if it is in a column. You can use the flex property with multiple widgets to give them weights. Here the green Container Widget takes 70% of the width and the yellow Container takes 30% of the width.
Container( height: MediaQuery.of(context).size.height * 0.50, child: Row( children: <Widget>[ Expanded( flex: 70, child: Container( color: Colors.lightBlue[400], ), ), Expanded( flex: 30, child: Container( color: Colors.deepPurple[800], ), ) ], ), )
So by using this, We will get output like below:

- Users can also try with FractionallySizedBox.
If you have a single widget you can use a FractionallySizedBox Widget to specify a percentage of the available space to fill. Here the green Container Widget is set to fill 70% of the available width and 30% of the available height.
Widget myWidget() { return FractionallySizedBox( widthFactor: 0.7, heightFactor: 0.3, child: Container( color: Colors.green, ), ); }
So if you want to do it vertically, then just replace Row Widget with Column Widget.
Widget myWidget() { return Row( children: <Widget>[ Expanded( flex: 7, child: Container( color: Colors.green, ), ), Expanded( flex: 3, child: Container( color: Colors.yellow, ), ), ], ); }
You can use MediaQuery with the current context of your widget and get width or height like below:
double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height
Now users can multiply it by the percentage they want.
Conclusion:
So in this article, we have learned about How to freeze elements to a percentage of Screen Width/Height in Flutter??
Thanks for聽Reading!!! Keep聽Learning!!! Keep Fluttering!!!
Do let us know if you need any assistance with聽Flutter Development? We’d Love to assist you 馃檪
FlutterAgency.com聽is our portal Platform dedicated to聽Flutter Technology聽and聽Flutter Developers. The portal is full of cool resources from Flutter like聽Flutter Widget聽Guide,聽Flutter Projects,聽Code libs聽and etc.
FlutterAgency.com is one of the most popular online portals dedicated to聽Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of聽Flutter.