Preface:

This is the 24th 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

1. Know the toy pack

The c-21 component is normally used only in the Stack, as described in the source book: a piece that controls the position of the Stack’s children.

The following is the definition and construction of the toy component class, which you can see inherits from ParentDataWidget

. It has six attributes: top left, bottom right, width and height. The left/right width cannot be null, and the upper/lower height cannot be NULL. And the child argument must be passed in.

Flexible, introduced earlier, is also a component of type ParentDataWidget and can only be used in Flex components. As you can see, ParentDataWidget can limit the scope of the component.

2. Use of the toy assembly

We can control the offset of the child components relative to the Stack component area by the top left, bottom right and bottom left. These values can be negative. ClipBehavior: Clip. None if you want to display the behavior beyond the Stack, the clipBehavior will be clipped.

class PositionedDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
          color: Colors.grey.withAlpha(33),
          constraints: BoxConstraints.tightFor(width: 200, height: 150),
          child: Stack(
            clipBehavior: Clip.none,
            children: <Widget>[
              Container(width: 100, height:100,color: Colors.red),
              Positioned(
                  left: - 12,
                  top: - 12,
                  child: Icon(Icons.ac_unit, color: Colors.black)),
              Positioned(
                  bottom: 20,
                  right: 10, child: Icon(Icons.ac_unit, color: Colors.green)) ], ), ); }}Copy the code

As for the width, it is used to determine the size of c-21, and the position of the green icon is set as follows: 120*150. So you can see the offset is in terms of the area of footprint.

class PositionedDemo extends StatelessWidget {... Slightly with Positioned (bottom:20,
          right: 10,
          width: 120,
          height: 150,
          child: Icon(Icons.ac_unit, color: Colors.green))
    ],
Copy the code

3. The constraint properties of the lower part of the toy component

In the next case, the green is packed through the toy bundle, the red is not packed, and they have no height. Can the red Container be displayed? Can the green Container be displayed?

The results show that the red is filled by stretching and the green is not shown. What is the science behind it?

As you can see, after wrapping the toy assembly, there is no constraint on the height because the Container does not specify the height.

The Container, unwrapped, would be constrained by the Stack.

By means of the LayoutBuilder, you can see the constraint under the traveller component, as follows, it can be seen that there is no constraint under the traveller component, which is the fundamental reason why the Container does not give you the height of 0.

3. Can the toy assembly only be used in the Stack?

If the tourists were Positioned elsewhere, the following anomaly would occur:

Technically, positioning is not limited to the Stack. Decision Positioned components can be used in the Stack components under RenderStack is the essential reason with the ContainerRenderObjectMixin < RenderBox, StackParentData >.

That is to say, if other rendering objects with the ContainerRenderObjectMixin < RenderBox, StackParentData >, the interior is also Positioned component can be used. For example, _RenderTheatre, the component of this render object is _Theatre. Used in Overlay component.

So in the Overlay component, we can also use the Positioned piece. That’s the end of this article. Thanks for watching and see you tomorrow