본문 바로가기
프론트엔드/플러터

Overlay와 Stack 용도 비교

by 1005ptr 2023. 5. 2.
반응형

Overlay랑 Stack의 각 용도는 뭘까?

`Overlay`와 `Stack`은 모두 위젯들을 겹쳐서 배치하는 데 사용됩니다. 그러나 두 위젯은 각각 다른 용도를 가지고 있습니다.

`Overlay`는 앱의 표시 계층에서 페이지 위에 떠있는 위젯을 추가하려는 경우에 사용됩니다. 예를 들어 다이얼로그, 툴팁, 알림 메시지, 팝업 메뉴 등과 같은 페이지 위에 떠있는 UI를 구현할 때 `Overlay`를 사용할 수 있습니다. `Overlay`는 `BuildContext` 객체를 이용하여 앱의 루트 위젯에서 생성해야 합니다. `Overlay.of(context)`를 호출하여 현재 라우트에서 사용 가능한 `OverlayState` 객체를 가져올 수 있으며, `OverlayEntry` 위젯을 이용하여 `Overlay`에 추가할 위젯을 정의할 수 있습니다.

반면에 `Stack`은 위젯을 겹쳐서 배치하는 데 사용됩니다. `Stack`을 사용하여 다양한 형태의 레이아웃을 만들 수 있습니다. 예를 들어, 위젯들을 가로로 배열하거나, 정중앙에 위치시키거나, 각각의 위치를 정확하게 지정하는 등의 레이아웃을 만들 수 있습니다. `Stack`은 `children` 속성을 사용하여 위젯을 추가합니다. 추가된 위젯들은 가장 마지막에 추가된 것이 맨 위에 보이게 됩니다. 또한, `Positioned` 위젯을 사용하여 각 위젯의 위치와 크기를 정확하게 지정할 수 있습니다.

따라서, `Overlay`는 페이지 위에 떠있는 UI를 구현할 때 사용하며, `Stack`은 다양한 형태의 레이아웃을 구현할 때 사용합니다. 두 위젯은 각각의 용도에 따라 적절하게 사용되어야 합니다.

 

둘중에 댓글창같은걸 만들떄는 뭐가 더 알맞을까?

댓글창과 같은 UI를 구현할 때는 `Overlay` 위젯이 더 적합합니다. `Overlay` 위젯은 페이지 위에 떠있는 UI를 구현하기 위한 목적으로 만들어졌기 때문입니다. 

`Overlay` 위젯을 사용하여 댓글창을 구현하면, 댓글창을 표시할 때 페이지를 덮지 않고 페이지 위에 떠있게 됩니다. 이렇게 함으로써 사용자는 댓글을 입력할 때도 페이지의 내용을 확인할 수 있으며, 댓글창을 닫았을 때도 페이지를 바로 확인할 수 있습니다.

따라서, 댓글창과 같은 UI를 구현할 때는 `Overlay` 위젯을 사용하는 것이 더 적합합니다.

반응형

'프론트엔드 > 플러터' 카테고리의 다른 글

Overlay  (0) 2023.05.02
Stack으로 겹치는 화면 만들기  (0) 2023.05.02
AppBar  (0) 2023.05.02
Scaffold  (0) 2023.05.02
SafeArea  (0) 2023.05.02

댓글