Top 3 Ways to Give Flutter Widget Size in Percentage

While designing the Flutter app, you might have observed that some widgets look different on some of the devices. There can be several reasons for this to happen. We have a lot of devices in the market today with different screen sizes and resolutions. It can be challenging to develop a design that looks the same on all the devices. Fortunately, Flutter allows you to add widget size in percentage. So in this tutorial, we’ll learn the top 3 ways to give Flutter widget size in percentage.

Here’s what we’ll cover:

• The Problem
• Ways to Give Flutter Widget Size in Percentage (The Solution)
  • Using MediaQuery
  • Using FractionallySizedBox
  • Using Expanded

The Problem

We are habituated to give a height and width to a widget in Flutter in a Fixed number. When your app with a fixed width and height, runs on a device that has a weird physical dimension or screen size/resolution, you start noticing the overflow issues. Sometimes users also set the larger font size in a device and this can cause the overflow issue.

So let’s see what are the ways to overcome the overflow issue.

Ways to Give Flutter Widget Size in Percentage (The Solution)

The problem of widgets looking different or overflow issues can be fixed by writing the height and width in percentage. For example, instead of writing the width=100, height=50, you can write something like width=(percentage value),height=(percentage value). 

You can’t directly write the percentage value directly and put a % sign after it in Flutter. Here are the top 3 ways you can use to give your Flutter widget size in percentage.

• Using MediaQuery
• Using FractionallySizedBox
• Using Expanded

Using MediaQuery

MediaQuery is a class in Fluter, that gives you the screen size and other useful user preferences from the device. It can be accessed by calling MediaQuery.of(context).size. 

You can retrieve the device’s width by calling MediaQuery.of(context).size.width and height by calling MediaQuery.of(context).size.height. 

Once you get the width and height, simply multiply it with the values between 0 and 1. For example, to set the widget’s height to 50% of the screen, use MediaQuery.of(context).size.height * 0.5 and to set the width to 70% of screen, use MediaQuery.of(context).size.width * 0.7

Example:

@override
Widget build(BuildContext context) {
  double screenWidth = MediaQuery.of(context).size.width;
  double screenHeight = MediaQuery.of(context).size.height;
  return Scaffold(
     // Some widget here
    ),
    body: Center(
      child: Container(
        width: screenWidth * 0.7,
        height: screenHeight * 0.5,
        color: Colors.deepOrangeAccent,
      ),
    ),
  );
}

Hint: In the code above, for the purpose of reuse, the MediaQuery screen width and height are stored in a variable inside the build method.

Output:

Using FractionallySizedBox

FractionallySizedBox size is a dedicated widget in Flutter that allows you to enter the width and height in percentage. FractionallySizedBox has got the widthFactor and heightFactor property. You can use both of the properties to give any flutter widget size in percentage.

For example, to create a widget with 70% of the screen’s width and 25% percent of the screen’s height, Set the widthFactor to 0.7 and heightFactor to 0.25.

Example:

FractionallySizedBox(
  widthFactor: 0.7,
  heightFactor: 0.25,
  child: Container(
    color: Colors.amber,
  ),
)

Output:

Using FractionallySizedBox to create White Space

You can also use FractionallySizedBox to create empty or white space inside a Column or Row. To use the FractionallySizedBox inside the Column or Row, simply wrap the FractionallySizedBox inside the Flexible widget and give the appropriate widthFactor and heigthFactor.

Example:

Column(
  children: [
    Container(
      height: 100,
      width: 200,
      color: Colors.amber,
    ),
    const Flexible(
      child: FractionallySizedBox(
        heightFactor: 0.3,
      ),
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.deepPurpleAccent,
    )
  ],
)

Output:

Using Expanded

In case if you want to adjust the children of Column or Row based on the screen’s height or width, you can use the Expanded widget. The Expanded widget allows the widget to grow and fill the available space. By setting the appropriate flex value, you can size the flutter widget based on the screen’s height and width.

Example:

Column(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.amber,
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.deepOrangeAccent,
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.deepPurpleAccent,
      ),
    ),
  ],
)

In the code above, the first container takes 10% of the height, the second takes 20% and the third one takes 30% of the screen.

Output:

You can also use this widget to wrap text on overflow.

That’s a wrap. Thanks!

Conclusion

In this tutorial, we learned the top 3 ways to give Flutter widget size in percentage with practical examples. We also learned how to use widgets such as FractionallySizedBox to create an empty space based on the screen’s height and width inside the column and Row.

Would you like to check other interesting Flutter tutorials?