current position:Home>Shutter fractionallysizedbox sets the size of the widget proportionally

Shutter fractionallysizedbox sets the size of the widget proportionally

2021-08-26 00:21:44 __ white

This is my participation 8 Yue Gengwen challenges 22 God , Check out the activity details :8 Yuegengwen challenge

FractionallySizedBox Scale settings Widget The size of the

occasionally , The design of the application is given in proportion , For example, in this case : There's a button , Its width should account for... Of the width of the application parent 70% perhaps The margins of the page are the of the overall control 10%


You can use FractionallySizedBox To achieve .

Construction method

const FractionallySizedBox({
  Key key,
  this.alignment =,
  Widget child,
 Copy code 

Let's look at the construction method first :

  • alignment: Alignment mode , Used to control FractionallySizedBox Position in parent component , The default is middle
  • widthFactor: Width factor , take 0-1 Between . Such as 0.8, Represents the width of... In available dimensions 80%.
  • heightFactor: Height coefficient , take 0-1 Between .
  • child: Required widget

About heightFactor/widthFactor , Its proportion is the proportion of available sizes , It is generally the size of the parent component , Not the size of the screen


  1. Set the size of the control

Use FractionallySizedBox To wrap what you want to set Widget, Give it a height or width factor , for example 0.5 Indicates the available dimensions 50%, Half .

And then use alignment To control FractionallySizedBox Where should it be displayed .

for example :

            alignment: Alignment.bottomRight,
            heightFactor: 0.5,
            widthFactor: 0.5,
            child: YourWidget
 Copy code 


  1. Fill in the blanks

If there is a line of components , For example, there is a picture on the left , There is a text on the right , And the middle is 10dp,

Maybe we'll use SizedBox Fill in :

            children: [
              SizedBox(width: 10),
              Text(' written words '),
 Copy code 

But what if the distance between the two is proportional ?

At this time, you can use no child Of FractionallySizedBox To replace SizedBox() To fill the empty space .


              heightFactor: 0.1,
 Copy code 

If it's in Row perhaps Column Use in , You can put this FractionallySizedBox Wrapped in Flexible in :

            child: FractionallySizedBox(
              heightFactor: 0.1,
 Copy code 

Code address :github


copyright notice
author[__ white],Please bring the original link to reprint, thank you.

Random recommended