Description of the use of Flutter SizedBox, FractionallySizedBox, LimitedBox and AspectRatio

This is the 26th day of my participation in Gwen Challenge

preface

Sometimes we want the height to be fixed and the width to be scaled, sometimes we want the width to be displayed in proportion, and sometimes we want the width to be set in percentage. Today we will look at the Box size Settings for Flutter.

A SizedBox

This we use more, such as setting the size of a button, setting the interval width, setting the interval height, etc., it is relatively simple to use to set the width and height.

SizedBox(
  height: 30,
  width: 30.)Copy the code

• Set button size

SizedBox(
  height: 100,
  width: 100,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('click'),),)Copy the code

• Instead of setting spacing

Row(
  children: [
    Expanded(child: BoxWidget()),
    // Set the spacing
    SizedBox(width: 20),
    Expanded(child: BoxWidget()),
  ],
)
Copy the code

Column(
  children: [
    Expanded(child: BoxWidget()),
    // Set the spacing
    SizedBox(height: 20),
    Expanded(child: BoxWidget()),
  ],
)
Copy the code

Several other shortcut functions

• SizedBox. Expand (to the maximum, width and height are infinite)

SizedBox.expand(
  child: ElevatedButton(
    onPressed: () {},
    child: Text('click'),),)Copy the code

• SizedBox. Shrink (both width and height are 0)

SizedBox.shrink()
Copy the code

Remember what we talked about earlierSpacer? He used it internallySizedBox.shrink()

FractionallySizedBox (scale box)

In real projects where we need to display at a certain scale, it would be cumbersome and inefficient to perform dynamic calculations and then refresh. Flutter takes this into account and allows us to use this Widget for nesting Settings.

• WidthFactor Width ratio

FractionallySizedBox(
  widthFactor: 1,
  child: BoxWidget(text: '1'),
),
SizedBox(height: 10),
FractionallySizedBox(
  widthFactor: 0.7,
  child: BoxWidget(text: '0.7'),
),
SizedBox(height: 10),
FractionallySizedBox(
  widthFactor: 0.4,
  child: BoxWidget(text: '0.4'),),Copy the code

• WidthFactor Width ratio

SizedBox(
  height: 100,
  child: FractionallySizedBox(
    heightFactor: 1,
    child: BoxWidget(text: '1'),
  ),
),
SizedBox(height: 10),
SizedBox(
  height: 100,
  child: FractionallySizedBox(
    heightFactor: 0.7,
    child: BoxWidget(text: '0.7'),
  ),
),
SizedBox(height: 10),
SizedBox(
  height: 100,
  child: FractionallySizedBox(
    heightFactor: 0.4,
    child: BoxWidget(text: '0.4'),),),Copy the code

LimitedBox

The Box above can only specify a fixed height. Sometimes we want the height to be displayed with the height of the subitem in the list, not just a uniform height. This problem can be solved thanks to the Widget that the Flutter makes for us.

• maxHeight

LimitedBox(
  // Set the maximum height
  maxHeight: 100,
  child: FractionallySizedBox(
    heightFactor: 1,
    child: BoxWidget(text: '1'),
  ),
),
SizedBox(height: 10),
LimitedBox(
  maxHeight: 100,
  child: FractionallySizedBox(
    heightFactor: 0.7,
    child: BoxWidget(
      text: '0.7',
      height: 100,
    ),
  ),
),
SizedBox(height: 10),
LimitedBox(
  maxHeight: 100,
  child: FractionallySizedBox(
    heightFactor: 0.4,
    child: BoxWidget(
      text: '0.4',),),),Copy the code

In contrast to the above effect, our children have automatically adapted to the corresponding height.

• MaxWidth (maximum width)

LimitedBox(
  // Set the maximum width
  maxWidth: 100,
  maxHeight: 100,
  child: FractionallySizedBox(
    heightFactor: 0.7,
    child: BoxWidget(
      text: '0.7',
      height: 100,
    ),
  ),
),
SizedBox(height: 10),
LimitedBox(
  maxWidth: 100,
  maxHeight: 100,
  child: FractionallySizedBox(
    heightFactor: 0.4,
    child: BoxWidget(
      text: '0.4',
    ),
  ),
),
SizedBox(height: 10),
LimitedBox(
  maxWidth: 100,
  maxHeight: 100,
  child: SizedBox(
    height: 200,
    child: BoxWidget(text: '0.4'),),)Copy the code

Why didn’t it work?

Because we have Column in the outer layer, it’s unconstrained in the vertical direction, and the maximum constraint in the horizontal direction is the screen width and the LimitedBox is only going to work if it’s unconstrained.

AspectRatio (AspectRatio box)

In the project, such as the adaptation of the signature canvas, Banner map, etc., are required to adapt according to the AspectRatio, if you calculate it is more troublesome, then the use of AspectRatio is very convenient.

AspectRatio(
  aspectRatio: 16 / 3,
  child: BoxWidget(
    text: '16/3',
  ),
),
SizedBox(height: 10),
AspectRatio(
  aspectRatio: 16 / 9,
  child: BoxWidget(
    text: '16/9',),)Copy the code

Source warehouse

Based on the latest version of Flutter 🔥

• Flutter Widgets warehouse

Refer to the link

• SizedBox (Flutter Widget of the Week)
• Flutter-SizedBox
• FractionallySizedBox (Flutter Widget of the Week)
• Flutter-FractionallySizedBox
• LimitedBox (Flutter Widget of the Week)
• Flutter-LimitedBox
• AspectRatio (Flutter Widget of the Week)
• Flutter-AspectRatio

Pay attention to column

• This article has been included in the column at 👇 below, you can follow it directly
• Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible