Stack / Positioned

Sunny·2022년 6월 1일

Stack

중복이 가능한 위젯! / 위젯 리스트를 가지고 아래부터 형성 / 다른 위젯에 중첩으로 씌움 / 지정되지 않은 하위요소에 맞추고자하면 디폴트로 크기가 정해지기에 fit 속성을 사용할 수 있음

기본적으로는 topStart로 하위요소 정렬
Positioned를 사용해서 특정 하위요소의 특정 위치 지정 가능
overflow를 사용해서 경계선을 벗어나게 할 수도 있음

공식 예제

Stack(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 90,
      height: 90,
      color: Colors.green,
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.blue,
    ),
  ],
)

Positioned

위젯들을 stack에 배치할 때 위치를 조정할 때도 쓰임!
top,botton,left,light, width, height 등을 사용

position.fill을 사용해서 꽉 채울 수도 있음 (상당히 많이 쓴 기억이 있다.)

profile
즐거움을 만드는 사람

0개의 댓글