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%

image-20200822151426410

You can use FractionallySizedBox To achieve .

Construction method

const FractionallySizedBox({
  Key key,
  this.alignment = Alignment.center,
  this.widthFactor,
  this.heightFactor,
  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 Alignment.center
  • 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

Use

  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 :

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

image-20200822153005763

  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 :

          Row(
            children: [
              Image.network('imgurl'),
              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 .

image-20200822153229372

FractionallySizedBox(
              heightFactor: 0.1,
            )
 Copy code 

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

Flexible(
            child: FractionallySizedBox(
              heightFactor: 0.1,
            ),
          )
 Copy code 

Code address :github

Expand

copyright notice
author[__ white],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826002140772Y.html

Random recommended