I. use of stacked layout

Horizontal layout and vertical layout are really easy to use, but there is a situation that cannot be completed, such as putting a picture, writing some words on the picture or putting it into a container. At this point, you can consider using Stack cascade layout.

/**
 * Stacked layout
 */
class StackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: FractionalOffset(0.9, 0.5),
      children: <Widget>[
        Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569660771470&di=8d3c09e5830a1a5667b25385bdaacf20&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b44b5d511452a8012187f4acf159.jpg%401280w_1l_2o_100sh.jpg"),
        Container(
          child: Text("Face south, eat watermelon skin and swing East", style: TextStyle(fontSize: 20.0)),
          width: 20.0,
        )
      ],
    );
  }
}

Effect:

alignment attribute of cascade layout

The alignment attribute controls the position of the stack. It is recommended to use it when two contents are stacked. It has two values: the X-axis distance and the Y-axis distance. The values are from 0 to 1, which start from the upper left corner of the upper container.

How to locate the stack of more than two components? Then you need to use the stacked positioning component, the Positioned component.

Properties of the Positioned component

• Bottom: distance from the bottom of the cascading component
• Left: distance to the left of the stack component
• Top: distance from the top edge of the stacked component
• Right: distance to the right of the stack component
• Width: the width of the stack positioning component
• Height: the height of the stack positioning component

/**
 * Cascade layout - cascade positioning component
 */
class StackPositionedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569660771470&di=8d3c09e5830a1a5667b25385bdaacf20&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b44b5d511452a8012187f4acf159.jpg%401280w_1l_2o_100sh.jpg"),
        Positioned(
            top: 10.0,
            left: 115.0,
            child: Container(
              child: Text("My life depend on myself not the fate.", style: TextStyle(fontSize: 30.0,color: Colors.red)),
            )),
        Positioned(
            top: 50.0,
            right: 20.0,
            child: Container(
              child: Text("Face south, eat watermelon skin and swing East", style: TextStyle(fontSize: 20.0)),
              width: 20.0,
            )),
        Positioned(
            top: 50.0,
            left: 20.0,
            child: Container(
              child: Text("Think about it, read it, turn left, turn right.", style: TextStyle(fontSize: 20.0)),
              width: 20.0,
            ))
      ],
    );
  }
}

Effect: