Positioned class
Stack 의 자식이 어디에 위치하는지 제어하는 위젯입니다.
Positioned 위젯 은 Stack 의 자손이어야 하며, Positioned 위젯에서 이를 둘러싼 Stack 까지 의 경로에는 StatelessWidget 또는 StatefulWidget 만 포함되어야 합니다. (RenderObjectWidget 과 같은 다른 종류의 위젯은 제외)
에제 코드
Postioned 는 우리가 Stack 안에서 배치를 할 때 절대 빠질 수 없는 필수 위젯 중에 하나이다. Positioned 는 Stack 안에서만 사용되며 그 외 다른 곳에서 사용되면 바로 오류가 나버린다. 무조건 Positioned 의 상위 위젯이 Stack 이여야 한다. Stack 안에 컨테이너 안에 포지션? 이런 거 안되고 무조건 바로 밑에 배치해야 사용할 수 있다. 그렇게 사용하지 않으면 Incorrect use of ParentDataWidget 이라는 오류가 뜨게 되는데 이게 디버그 모드에서는 화면에 표시가 안되고 디버그 창에서만 올라오는 오류라 무시하기 마련인데 앱을 release 로 빌드하면 Stack 부분으로 감싼 모든 곳이 저 오류로 인하여 표시가 되지 않는 대참사가 필연적으로 발생할 것이다. 그러므로 반드시 Stack 아래에 배치하도록 하자. 서론은 여기까지, 한번 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| child | Widget | – | 안에서 위치를 지정할 자식 위젯 |
| left | double? | null | 왼쪽에서부터 자식의 왼쪽까지 거리 |
| top | double? | null | 위쪽에서부터 자식의 위쪽까지 거리 |
| right | double? | null | 오른쪽에서부터 자식의 오른쪽까지 거리 |
| bottom | double? | null | 아래쪽에서부터 자식의 아래쪽까지 거리 |
| width | double? | null | 자식 위젯의 고정 너비 |
| height | double? | null | 자식 위젯의 고정 높이 |
솔직히 위의 코드 예제만 봐도 감이 올 거라 생각하지만 설명은 하고 넘어가겠다. Positioned 는 하위 속성으로 자식 위젯을 어떤 위치에 배치할지 정할 서 있는데 보는 것처럼 left, top, right, bottom 이렇게 네방향으로 전부 위치를 지정할 수 있다.
Stack(
alignment: Alignment.center,
children: [
Positioned(Positioned 는 기본적으로 스크린 왼쪽 상단이 0,0 즉 기준점인데 만약 중앙에 배치하게 하고 싶거나 기본 정렬을 중앙으로 두고 거기에서 위치를 조절하고 싶다면 Stack 의 하위 속성인 alignment 에서 center 를 먹여주면 된다. 나는 개인적으로 Stack 에서 Postion 을 사용해야 할 때 이 방법을 가장 애용하고 있다.
또한 하위 속성으로 width 와 height 가 있는데 솔직히 얘네 사용할빠에 더 확실하게 자식 위젯의 크기를 먹여주는 것을 추천한다.
이제 또 많이 사용하는 값으로는 예제 코드에도 사용한 Stack 안에 있는 clipBehavior: Clip.none 인데 이걸 사용해 주면 Stack 의 자식에 배치되는 위젯의 UI 가 잘리지 않게 된다. 즉 지정된 크기 밖으로 벗어나도 벗어난 만큼 UI 가 표시되지 않는 것이 아닌 표시가 된다는 말이다. 이 속성을 사용하면 좀 더 플러터의 한계(?)를 벗어난 것 같은 디자인을 할 수 있다.
Positioned 는 Stack 안에서만 사용되다 보니까 Stack 을 사용하기 위에서는 꼭꼭 알아야 하는 위젯 중에 하나이기도 하고 정말 많이 쓰는 위젯인 만큼 많은 사람들이 사용하는 위젯이기도 하다. 사용 난이도는 7살 어린애도 사용할 수 있을 정도로 쉽지만 앞서 언급한 걸 지키지 않는 다면 진짜 큰 코를 겁나게 다칠 수 있으니 (최소 전치 12주) 잘 사용해야 할 것이다. 도움이 되었길 바라며 마치겠다.
