close

Sizing elements to percentage of screen width/height

In many cases we don’t need our gadgets to have a particular width or stature, but instead have a width or tallness that is comparative with the parent. For example, we need a holder to take 65% of the screen width or two compartments that each taking individually 70% and 30% of parent width. These are only 2 models all things considered, yet once you become familiar with the rudiments, you can apply it to each case.

Estimating a gadget comparative with screen size

To have the option to do this, we need to know the size of the gadget screen. No concerns, Flutter has quite recently the gadget for that. To get the screen size simply do the accompanying:

MediaQuery.of(context).size // contains width and height

Furthermore, use it anyplace in your application. Suppose we need to have a compartment with width and stature that are half as extensive as the screen. We would wind up with the accompanying code.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("MediaQuery"),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width * 0.5,
        height: MediaQuery.of(context).size.height * 0.5,
      ),
    );
  }

But what if we want to have a container that takes half of the available space (means half of the parent widget)? Enter

Estimating a gadget comparative with its parent

FractionallySizedBox is a gadget (a compartment) that lets its kid have a widthFactor and a heightFactor. You can consider this to be a sort of scale esteem. So on the off chance that we need to have a holder that takes half of the accessible space on a level plane and vertically, we would do the accompanying:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FractionallySizedBox"),
      ),
      body: FractionallySizedBox(
        widthFactor: 0.5,
        heightFactor: 0.5,
        child: Container(
          // this container won't be larger than
          // half of its parent size
        ),
      ),
    );
  }

Imagine a scenario in which we have a rundown of gadgets that we need to put close to one another on a level plane or vertically and we need them to take a specific level of the rundown. We can do only that utilizing

Measuring a rundown of gadgets comparative with one another

By utilizing extended and setting the flex property, we can give every gadget in a Row or Column its own weight.That implies the amount of the accessible space of that gadget it is permitted to fill. So we can have the accompanying code for a level arrangement:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expanded"),
      ),
      body: Container(
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 6, // 60% of space => (6/(6 + 4))
              child: Container(
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 4, // 40% of space
              child: Container(
                color: Colors.purple,
              ),
            ),
          ],
        ),
      ),
    );
  }

Of course, Expanded takes the entire accessible space, so in the event that we need 2 gadgets to take half of the space, we can eliminate the flex property inside and out.

There are more approaches to estimate gadgets comparative with a parent gadget, I just depicted the most well-known ways. On the off chance that you realize more approaches to do this, told me in the remark segment.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment