Preface:

This is the 26th day of my participation in the August More Text Challenge. In preparation for the Nuggets’ August challenge, I’m going to pick 31 components this month that I haven’t covered before for a full analysis and attribute presentation. These articles will serve as important material for future compilation of Flutter components. I hope I can stick to it, your support will be my biggest motivation ~

This series Component articles The list of
1.NotificationListener 2.Dismissible 3.Switch
4.Scrollbar 5.ClipPath 6.CupertinoActivityIndicator
7.Opacity 8.FadeTransition 9. AnimatedOpacity
10. FadeInImage 11. Offstage 12. TickerMode
13. Visibility 14. Padding 15. AnimatedContainer
16.CircleAvatar 17.PhysicalShape 18.Divider
Flexible, Expanded, and Spacer 20.Card 21.SizedBox
22.ConstrainedBox 23.Stack 24.Positioned
25.OverflowBox 26.SizedOverflowBox

1. Know the SizedOverflowBox component

SizedOverflowBox: SizedOverflowBox: SizedOverflowBox

    1. It can specify its own specific size
    1. It passes on the original constraints to the child
    1. Its children can overflow

The OverflowBox component introduced in the previous article also allows child components to overflow. The biggest difference is that the OverflowBox specifies the new constraint to be passed to the child, while SizedOverflowBox passes the original constraint to the child.

Below is SizedOverflowBox component class definition and construction method, it can be seen that it inherited from SingleChildRenderObjectWidget. The size argument must be passed to construction, and the alignment can be specified.

2. Use of SizedOverflowBox components

Below, in the upper left corner of a gray box, there is a small red circle whose center is aligned with the upper left corner of the box. You can see in effect that the small red circle overflows the area of the gray box. TopLeft, SizedOverflowBox Alignment Alignment. Center.

class CustomSizedOverflowBox extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.topLeft,
      color: Colors.grey.withAlpha(88),
      width: 50,
      height: 50,
      child: buildChild(),
    );
  }

  Widget buildChild() {
    return SizedOverflowBox(
      alignment: Alignment.center,
      size: Size.zero,
      child: Container(
        decoration: const BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        width: 15,
        height: 15,),); }}Copy the code

Size(0,0) is the Size we passed in when constructing the flowbox.

When size is set to size (30,25), the effect is as follows. You can see that the specified size value is the size of SizedOverflowBox, and the SizedOverflowBox alignment property is its internal alignment.

SizedOverflowBox(
  alignment: Alignment.center,
  size: Size(30.25),
  / / the same...
);
Copy the code

Here is the effect of SizedOverflowBox#alignment with alignment. TopLeft, which shows the small red ball aligned with the upper left corner. This is where the alignment and size properties of SizedOverflowBox come in.

SizedOverflowBox(
  alignment: Alignment.topLeft,
  size: Size(30.25),
  / / the same...
);
Copy the code

3. SizedOverflowBox constraint analysis

First, SizedOverflowBox is constrained by the parent. For example, the Container imposes a tight [w(50,50) -h (50,50)] constraint, but because of Container#alignment, the Align component is used internally. The size of SizedOverflowBox is [w(0,50) -h (0,50)]. The size of SizedOverflowBox is 30*25.

If the Container#alignment attribute is removed, the strong [w(50,50) -h (50,50)] constraint is applied directly to the SizedOverflowBox, even if the size requested is 30*25. This also indirectly produces the Align component that acts as a loose constraint.

SizedOverflowBox is unique in that its constraints are passed directly to the child, unchanged. Align imposes the [w(0,50) -h (0,50)] loose constraint on SizedOverflowBox, which passes directly to the little red dot. That is, although the little red dot can cross the boundary, its size is still constrained by its outer layer.

SizedOverflowBox will pass its constraints directly to the child, which explains why it removed Container#alignment. SizedOverflowBox is 50 by 50 and the small red dot is 50 by 50.

Even if the small red dot size is 150*150, its own size will be limited due to the constraint of [w(0,50) -h (0,50)].

SizedOverflowBox source code implementation

SizedOverflowBox inherited from SingleChildRenderObjectWidget, internal maintenance RenderSizedOverflowBox rendering objects to implement the function.

You can see that the size of the entry and exit parameter is assigned to the _requestedSize attribute.

In performLayout, the size of the RenderSizedOverflowBox is determined by the current constraint and request size. This render object is very special, generally the constraint X is passed down to the child nodes for layout, and then the child nodes feedback the dimensions up. In this case, the size of the parent node is determined first, indicating that its size is not affected by the child render object. If child is not empty, the self-rendered object is laid out, passing in its own original constraints.

That’s the end of this article. Thanks for watching and see you tomorrow