Preface:

This is the 23rd 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

1. Learn about the Stack components

Stack is a frequently used component that I can use to Stack several components. It is described in the source code:

A component that positions its children relative to the edge of the box.Copy the code

In other words, Stack components are good at locating components. The following is the definition and the Stack component class constructor, as you can see it inherited from MultiChildRenderObjectWidget. So a list of components is acceptable. Additional configuration parameters are described below.

2. Simple use of Stack components

Here, Stack the blue box, the red box and an icon together. As you can see, by default components are aligned in the upper left corner of the Stack area and are stacked according to the order of the list elements.

Stack(
  children: <Widget>[
    Container( width: 100, height: 100, color: Colors.red ),
    Container( width: 60, height: 60, color: Colors.green ),
    Icon(Icons.ac_unit,color: Colors.white )
  ],
);
Copy the code

TextDirection properties

According to the reading habits of different countries, textDirection is given to determine the arrangement direction. It is of type TextDirection enumeration and has two elements, RTL for right to left and LTR for left to right.

enum TextDirection {
  /// The text flows from right to left (e.g. Arabic, Hebrew).
  rtl,
  /// The text flows from left to right (e.g., English, French).
  ltr,
}
Copy the code

When textDirection is set to RTL, it looks like this, aligned in the upper right corner of the Stack area.

Stack(
  textDirection: TextDirection.rtl,
  children: <Widget>[
    Container( width: 100, height: 100, color: Colors.red ),
    Container( width: 60, height: 60, color: Colors.green ),
    Icon(Icons.ac_unit,color: Colors.white )
  ],
);
Copy the code

Alignment properties

The alignment attribute should be familiar, and is of type AlignmentGeometry, which controls alignment. For example, setting the alignments to the alignment. center constant will center the alignments in the Stack.

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    Container( width: 100, height: 100, color: Colors.red ),
    Container( width: 60, height: 60, color: Colors.green ),
    Icon(Icons.ac_unit,color: Colors.white )
  ],
);
Copy the code

In addition, in addition to the eight azimuth Alignment, you can specify your own Alignment. The use of the alignment attribute was described in detail in the previous article “Amazing Align”, which will not be repeated here. For example, here is the effect of Alignment(0.2,0.2).

3. Fit properties of the Stack

The FIT attribute is of type StackFit enumeration and has the following three elements. By default, it is loose.

enum StackFit {
  loose,
  expand,
  passthrough,
}
Copy the code

ConstrainedBox ConstrainedBox, ConstrainedBox, ConstrainedBox, ConstrainedBox, ConstrainedBox, ConstrainedBox

ConstrainedBox(
  constraints: BoxConstraints.tightFor(width:200,height:150),
  child: Stack(
  fit: StackFit.loose,
  children: <Widget>[
    Container(width: 100, height: 100, color: Colors.red),
    Container(width: 60, height: 60, color: Colors.green),
    Icon(Icons.ac_unit,color: Colors.white,)
  ],
));
Copy the code

As you can see, in the case of StackFit.loose, the child component is not constrained by the fixed size, but by the upper bound of the fixed area, as shown in red below.

At this point, in the case of StackFit.expand, the child component is also strongly constrained by a fixed size.

Under this constraint, the Container becomes a fixed width and height, even though the blue color itself requires 60 x 60.

In fact, a quick peek at the RenderStack source code will give you an idea of how fit works. In loose, a loose constraint is created through constraints.loosen() by setting the minimum width to 0 and the maximum width to the corresponding maximum. Expand will set the maximum area of its constraint as the fixed width and height constraint. Finally, passthrough does nothing and imposes its own constraints directly on the child nodes.

BoxConstraints loosen() {
  assert(debugAssertIsValid());
  return BoxConstraints(
    minWidth: 0.0,
    maxWidth: maxWidth,
    minHeight: 0.0,
    maxHeight: maxHeight,
  );
}
Copy the code

Stack overflow and clipBehavior properties

We can clearly see that the Overflow property is an outdated property, and clipBehavior is its replacement. I won’t go into what a clipBehavior is, see ClipPath.

So why do you need clipBehavior to crop? Precise positioning of the child component, or even negative numbers, can be performed through the toy component. As follows the left offset is -20 and the right offset is -10. The default clipping behavior is hardEdge, which looks like this:

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

When clipBehavior: Clip.None, no clipping is done, and the ones out of bounds are displayed. Note that the part that is out of bounds cannot respond to click events. If you need to click, there are other components that can handle that.

The use of Stack is introduced here, that is the end of this article, thank you for watching, see you tomorrow ~