Hello everyone, I am 17.
FractionallySizedBox is a layout widget, which can give child tight constraints and is mostly used to fill blanks proportionally.
BoxConstraints _getInnerConstraints(BoxConstraints constraints) {
double minWidth = constraints.minWidth;
double maxWidth = constraints.maxWidth;
if (_widthFactor != null) {
final double width = maxWidth * _widthFactor!;
minWidth = width;
maxWidth = width;
}
double minHeight = constraints.minHeight;
double maxHeight = constraints.maxHeight;
if (_heightFactor != null) {
final double height = maxHeight * _heightFactor!;
minHeight = height;
maxHeight = height;
}
return BoxConstraints(
minWidth: minWidth,
maxWidth: maxWidth,
minHeight: minHeight,
maxHeight: maxHeight,
);
}
void performLayout() {
if (child != null) {
child!.layout(_getInnerConstraints(constraints), parentUsesSize: true);
size = constraints.constrain(child!.size);
alignChild();
} else {
size = constraints.constrain(_getInnerConstraints(constraints).constrain(Size.zero));
}
}
The above two pieces of code are the layout logic of FractionallySizedBox. We describe it from three aspects.
- Determine the child's constraints
- determine your size
- Place the children.
Determine child constraints
The constraints are tight, and the FractionallySizedBox transparently transmits the constraints to the child.
Constrains is loose, widthFactor is empty, FractionallySizedBox transparently transmits minWidth, maxWith to child; heightFactor is empty, FractionallySizedBox transparently transmits minHeight, maxHeight to child.
constraints is loose, widthFactor is not empty, within the scope of constraints to the child's width tight constraints; heightFactor is not empty, within the scope of constraints to the child's height tight constraints.
for example:
ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 0,
maxWidth: 100,
minHeight: 0,
maxHeight: 100),
child: FractionallySizedBox(
widthFactor: 0.5,
child: Container(
color: Colors.green[400],
),
));
widthFactor is not empty, the child's width is constrained by tight, and the value 100 * 0.5is equal to 50.
If heightFactor is empty, FractionallySizedBox will transparently pass constraints to child. Container will try to be as large as possible without child, so the height is 100.
widthFactor and heightFactor must be greater than 0, can be greater than 1, so the size of the child can exceed the parent
determine your size
Simply put, the size of FractionallySizedBox will not exceed the bounds of constraints. Under this premise, the FractionallySizedBox should be as big as the child as much as possible. If there is no child, try to take the value set by widthFactor and heightFactor.
place child
Place the child through the alignment parameter. Only works if the FractionallySizedBox is not the same size as the child.
Application Scenario
Fill blanks proportionally
Container(
width: 100,
height: 100,
child: FractionallySizedBox(
widthFactor: 0.8,
heightFactor: 0.8,
decoration: BoxDecoration(border: Border.all(color: Colors.blue,width: 2)),
child: Container(
color: Colors.green[400],
),
))
Although the padding of the container can also be blank, it cannot be changed flexibly.
FractionallySizedBox can be used in Row and Column, but it needs to be wrapped with Flexible.
FractionallySizedBox can allow the child to exceed the parent container and do overflow effects, but if it overflows, it will be more readable with OverflowBox .
Compare with SizedBox
Both SizedBox and FractionallySizedBox can give child tight constraints.
Although both can fill in the blanks, the scenarios are different. SizedBox fills gaps between siblings at the same level, and FractionallySizedBox fills gaps between parents and children.
The child of SizedBox must be within the scope of constraints, and the child of FractionallySizedBox can exceed the scope of constraints.