Flutter - the most detailed (Positioned) tutorial

Introduction to Positioned

Creates a widget that controls the position of the [Stack]'s children.

scenes to be used:

The position of the control can be placed in the form of coordinates, which can be used when stacking layouts;

Attributes	effect
width	width
height	high
top	top
bottom	end
left	left
right	right

Precautions:

1. If the width and height are set, then left and right cannot exist at the same time, and top and bottom cannot exist at the same time;
2. If the width and height are not set, you need to set the top, bottom, left, and right attributes;
3. top, bottom, When both left and right are set to zero, the full screen will be covered;

When the attributes are all 0, the full screen is covered

          Positioned(
             top: 0,
             bottom: 0,
             left: 0,
             right: 0,
            child: Container(
              color: ColorsUtils.randomColor(),
              child: Text("1"),
            ),
          )

When both top and left are 50 spacing

Stack(
        alignment: Alignment.topLeft,
        children: [
          Positioned(
            width: 150,
            height: 150,
            // top: 10,
            // bottom: 10,
            // left: 10,
            // right: 10,
            child: Container(
              color: ColorsUtils.randomColor(),
              child: Text("1"),
            ),
          ),
          Positioned(
            width: 150,
            height: 150,
            top: 50,
            // bottom: 10,
            left: 50,
            // right: 10,
            child: Container(
              color: ColorsUtils.randomColor(),
              child: Text("2"),
            ),
          ),
        ],
      )