For developers who have written about Flutter, I’m sure that most of them can’t predict exactly what they want the layout to be after Hot Reload. The layout of a Flutter is very different from that of a Native. Therefore, understanding the myriad of Flutter components is fundamental to our accurate layout.
Flutter has a bunch of Box layout components that can be used to adjust the layout more precisely. Let’s take a look at what they can do with Flutter.
ConstrainedBox
ConstrainedBox Is used to restrict the size constraints of a Child Widget, for example:
- Let the Text be 100 wide to achieve multiple lines
- Fixed the maximum and minimum sizes of widgets
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 100,
),
child: const Text(
'xuyisheng',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50,
),
),
),
ConstrainedBox(
constraints: const BoxConstraints(
minHeight: 100,
),
child: ElevatedButton(
child: const Text('Flutter'),
onPressed: () {},
),
),
],
),
)`
Copy the codeThe effect is shown below.
UnconstrainedBox
ConstrainedBox works exactly the opposite of ConstrainedBox. It can break the constraint rules of the components themselves, making it easier to layout.
Take this example:
Center(
child: Container(
color: Colors.blue,
width: 300,
height: 300,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
)
Copy the codeDue to the Container layout rules, the internal Container is set to the size of the parent Widget, ignoring the size of the child Widget, so we use UnconstrainedBox to release this constraint:
Center(
child: Container(
color: Colors.blue,
width: 300,
height: 300,
child: UnconstrainedBox(
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
),
)
Copy the codeIn this way, internal Containers can be arranged according to their own size.
To be more flexible, we can also choose to keep the constraint in one direction: constrainedAxis: Axis. Horizontal.
SizedBox
SizedBox has the following usage scenarios:
- When you need an exact size Widget, use the SizedBox to constrain it
- Fill up the remaining space in the parent container
- Partition space without child
Scenario 1:
SizedBox( width: 200, height: 200, child: Text( 'xuyisheng', textAlign: TextAlign.center, style: TextStyle( fontSize: 50,),),)Copy the codeScenario 2: Double. Infinity in one direction will be expanded as much as the parent allows.
Center(
child: Container(
color: Colors.red,
width: 200,
height: 200,
child: Center(
child: Container(
color: Colors.blue,
child: const SizedBox(
width: double.infinity,
height: 100,
child: Text(
'xuyisheng',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50,
),
),
),
),
),
),
)
Copy the codeThe display effect is shown in the figure.
If the width and height directions fill the remaining space of the parent Widget, use SizedBox. Expand.
There is also a convenient method called sizedbox.shrink, which is used to make the size as small as possible within the constraints of the parent container. If the parent container does not set minWidth or minHeight, the size is 0. This property is usually used in combination with BoxConstraints.
FractionallySizedBox
This is a 100% layout tool that Flutter provides for you. Usually used in parent containers to layout by percentage.
Center( child: Container( color: Colors.red, width: 200, height: 200, child: const FractionallySizedBox( widthFactor: 0.5, heightFactor: 0.5, Child: Text('xuyisheng', textAlign: textalign.center, style: TextStyle(fontSize: (), (), (), ()Copy the codeThe display effect is shown in the figure.
Like SizedBox, it can also be used as a direct interval for widgets, except that it uses percentages and the total is the size of the parent container.
If you wrap FractionallySizedBox with a Flexible component, this applies to Row and Column.
Note that widthFactor and heightFactor can be greater than 1, that is, child widgets can be displayed beyond the parent container.
LimitedBox
How do you set the default size on a Widget when there is no parent to limit its size? This is where LimitedBox comes in.
LimitedBox limits the size of child widgets by default only if the parent container does not provide a size constraint, which is useful in ListViews and columns and rows.
❝
LimitedBox will not take effect if the external container sets a size constraint on the Child
❞
For example, the following scenario:
ListView(
children: [
for (var i = 0; i < 100; i++)
Container(
margin: const EdgeInsets.all(8),
color: Colors.green,
),
],
)`
Copy the codeBecause there is no size constraint in the Listview, the Container will not display, so you need to use LimitedBox.
ListView(
children: [
for (var i = 0; i < 100; i++)
LimitedBox(
maxHeight: 100,
child: Container(
margin: const EdgeInsets.all(8),
color: Colors.green,
),
),
],
)`
Copy the codeA summary of the LimitedBox’s role: In an unrestricted environment, provide the default size for its child elements.
FittedBox
In a Flutter, widgets can be stacked and nested arbitrarily, so when the size of the child Widget is different from the size of the parent Widget, some strange patterns can occur. FittedBox is used to handle this situation.
Center(
child: Container(
width: 200,
height: 200,
color: Colors.red,
child: Text(
'xuyishengxuyisheng',
style: TextStyle(
fontSize: 50,
),
),
),
)`
Copy the codeThe effect is shown below.
Text is wrapped because of the size of the parent container, so let’s add FittedBox to it.
Center(
child: Container(
width: 200,
height: 200,
color: Colors.red,
child: FittedBox(
child: Text(
'xuyishengxuyisheng',
style: TextStyle(
fontSize: 50,
),
),
),
),
)`
Copy the codeThe effect is shown below.
The default fit of FittedBox is contain, so the content is displayed in a single line, regardless of the FontSize.
Of course, you can also set up other fit methods. For details, see the Flutter Dojo example. The fit attribute is very useful. For example, if you set the FittedBox, the Text will automatically display in a single line. However, if you switch between vertical and horizontal screens, the Text will automatically change the Size of the Text to contain. You can set Fit to scaleDown, so that it will Fit at the minimum size and will not automatically enlarge the font size when there is enough space.
Alignment can also be set in FittedBox to control the alignment of the neutron widgets in the remaining space.
In short, a FittedBox is a component that allows a Child to adapt to a Parent.
Flexible
Flexible is not exactly a Box layout container, but it is closely related to the way Box is laid out, so it is included here.
Flexible is usually used in Column or Row, and with Flexible, you can layout elements in Column and Row to Flex proportions.
Column(
children: [
Flexible(
flex: 3,
child: Container(
color: Colors.cyan,
),
),
Flexible(
flex: 2,
child: Container(
color: Colors.green,
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.purple,
),
),
],
)`
Copy the codeAlso, when a child Widget has a size constraint, you can use the FIT property to control which constraint Flex chooses. If it is Flexfit. tight, Flexible follows the Flex layout strictly and ignores the size constraint of the child Widget. If it is Flexfit.loose, The size is set to the size of the child Widget.
OverflowBox
For the child widgets of a Flutter, the child widgets are usually limited to the size of the parent Widget. However, if the child widgets must exceed the rendering area of the parent Widget, this can be done using the OverflowBox.
Container(color: Colors. Blue, width: 200, height: 200, padding: const EdgeInsets. All (12.0), child: OverflowBox(alignment: alignment. TopLeft, maxWidth: 300.0, maxHeight: 500.0, child: Container(color: Colors. Red, width: 400.0, height: 400.0,),) 'Copy the codeThe effect is shown below.
