How to Freeze Elements to Percentage of Screen Width/Height in Flutter?

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.