In flutter how can we set height or width by percentage?

Question

Need to know one thing in flutter is it possible to define height/width in % ? I am following some tutorial but in end, I notice that UI is not responsive so I think best way is to fix height or width by a percentage.

We can simply take example of SizedBox

SizedBox(height: 20,)

How can I show height like 5% in this SizedBox? or any other best solution to make height responsive?

https://stackoverflow.com/questions/43122113/sizing-elements-to-percentage-of-screen-width-height — FloW, Apr 05 '20 at 09:54

score 13 · Answer 1 · edited Apr 05 '20 at 10:00

13

You can use FractionallySizedBox instead of SizedBox.

Ex

FractionallySizedBox(heightFactor: 1, widthFactor: 0.25,
  child: Container(color: Colors.orange)),

edited Apr 05 '20 at 10:00

CopsOnRoad

237,138
77
654
440

answered Apr 05 '20 at 09:52

Brinda Rathod

2,693
1
20
32

Thanks for your answer can you tell me how can I replace with a sized box height of 40? I try in a container of the whole page its working fine but in sized box height its showing error RenderPadding object was given an infinite size during layout. can you please tell me how can I set FractionallySizedBox? – UmaiZ Apr 05 '20 at 16:11

score 1 · Answer 2 · answered Apr 05 '20 at 11:09

You can access the MediaQuery property

h = MediaQuery.of(context).size.height
w = MediaQuery.of(context).size.width

myWidgetHeight = h * 0.35

This is helpful when u want to get the size of the screen the app is working on and manipulate in a function, other than a widget property

In flutter how can we set height or width by percentage?

2 Answers2