Sizing elements to percentage of screen width/height

How can I set the size of widget to fraction of screen size?

Is there a widget to achieve this?

It is actually pretty easy. You can use MediaQuery for this.

double width = MediaQuery.of(context).size.width; # calculate the screen size

double yourWidth = width * 0.85; # if you need 85% of the original screen size
2 Likes

You can also use FractionallySizedBox as follows:

Widget myWidget() {
  return FractionallySizedBox(
    widthFactor: 0.75,
    heightFactor: 0.25,
    child: Container(
      color: Colors.red,
    ),
  );
}
1 Like

Yeah @Jyotigautam that’s a nice way to do it. Can you think of any limitations with my approach. Wondering if they both solve the same problem.