August OverflowBox Flutter components checked 】 【 | more challenges

Preface:

This is the 25th day of my participation in the August 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 ~

1. Learn about the OverflowBox component

As we all know, in general layout components, the child node areas are restricted to the inner parent area due to the constraints of the parent area. But sometimes we need to let the child component out of the zone and overflow the parent zone. That’s where OverflowBox comes in. A component can be allowed to override its parent by differentiating its constraints from those of its parent.

Below is OverflowBox component class definition and construction method, it can be seen that it inherited from SingleChildRenderObjectWidget. You can set the width and height area and its way.

2. Use of OverflowBox components

Before we talk about OverflowBox, let’s look at the general box constraints. In the following code, the size of the father’s SizedBox is 100*100. According to the normal transmission of constraints, the child’s SizedBox wants the 200*50 area, but it cannot break the display of the father’s constraints. As follows, the second SizedBox is 100*100 with a strong constraint of 100*100.

class OverflowBoxDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return SizedBox(
            width: 100,
            height: 100,
            child: buildBox()
    );
  }

  Widget buildBox() {
    return SizedBox(
          width: 200,
          height: 50,); }}Copy the code

How can you make a child SizedBox break the limit? Here’s how to set a 200*50 strong constraint with the OverflowBox. In this way, the SizedBox will layout according to the constraints imposed by the OverflowBox. In effect, the child SizedBox breaks through the outer constraints.

Widget buildBox() {
  return OverflowBox(
    minHeight: 50,
    minWidth: 200,
    maxWidth: 200,
    maxHeight: 50,
    child: SizedBox(
          width: 200,
          height: 50,),); }Copy the code

3. The OverflowBox alignment attribute

Center by default. For example, in the figure above, the child SizedBox is aligned with the center of the outside area. The following is the Alignment. TopLeft which is the upper left corner of the Alignment.

OverflowBox(
  alignment: Alignment.topLeft,
  minHeight: 50,
  minWidth: 200,
  maxWidth: 200,
  maxHeight: 50,
  child: SizedBox(
        width: 200,
        height: 50,),);Copy the code

The effect is as follows, that is, the OverflowBox not only allows child components to cross boundaries, but also specifies the Alignment of child components with respect to the outer region. By comparing the three directions, you should understand the function of alignment.

The OverflowBox component makes it easy to handle the need for a child component to step out of bounds, as shown below. The red component falls out of the blue area. Try it out for yourself. One more note: parts that cross boundaries through the OverflowBox cannot respond to click events.

4. OverflowBox source code implementation

OverflowBox inherited from SingleChildRenderObjectWidget, internal maintenance RenderConstrainedOverflowBox objects to implement the function.

Implementation of the principle is simple, the following constraints in the red box is RenderConstrainedOverflowBox own constraints, you can see in the _getInnerConstraints generates new constraints, if several parameters are set, Into the constraints of ginseng is useless, also means that RenderConstrainedOverflowBox is ignored the upper bound, to restrain the child with a new constraints.

For example:

---->[scene 1]---- Child: Dad, give it to me100Buy toys. Father: I just50Take it and get out of here. ---->[scene 2]---- Child: Dad, give it to me100Buy toys. Father: I just50Take it and get out of here. Mother: No, I have100You can have it, kid. Father: Mother, this50You take.Copy the code

It can be seen that the essence of OverflowBox is to redefine the child’s area, instead of the original agreed area. But the OverflowBox itself will be limited by the original convention area. It is also a substitute for peach, perfect child’s “licentious”.

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