플러터(Flutter)에서 Stack 위젯과 SizedBox 위젯은 UI 구성을 위해 자주 사용되는 위젯입니다. Stack 위젯은 위젯을 겹쳐서 표시하는 데 사용되는 반면, SizedBox 위젯은 고정된 크기의 상자를 만들 때 사용됩니다. 이번 포스트에서는 Stack 위젯과 SizedBox 위젯을 함께 사용하는 방법에 대해 알아보겠습니다.
Stack 위젯
Stack 위젯은 다른 위젯들을 겹쳐서 표시할 수 있도록 도와주는 위젯입니다. Stack 위젯은 자식 위젯들을 중첩시켜서 사용할 수 있으며, 각 위젯의 위치 및 크기를 지정할 수 있습니다. 아래는 Stack 위젯의 간단한 예시입니다.
Stack(
children: [
Container(
width: 200,
height: 200,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
],
)
위의 예시에서는 빨간색 Container와 파란색 Container를 Stack 위젯 안에 겹쳐서 표시하고 있습니다. 빨간색 Container는 크기가 200x200이며, 파란색 Container는 크기가 100x100입니다.
SizedBox 위젯
SizedBox 위젯은 고정된 크기의 상자를 만들기 위해 사용됩니다. 주로 다른 위젯을 감싸거나 정렬하는데 사용됩니다. 아래는 SizedBox 위젯의 간단한 예시입니다.
SizedBox(
width: 200,
height: 100,
child: Container(
color: Colors.yellow,
),
)
위의 예시에서는 크기가 200x100인 노란색 Container를 SizedBox 위젯 안에 감싸고 있습니다.
Stack 위젯과 SizedBox 위젯 함께 사용하기
Stack 위젯과 SizedBox 위젯은 함께 사용하여 UI를 조정할 수 있습니다. 예를 들어, Stack 안에 SizedBox를 배치하여 자식 위젯의 크기 및 위치를 조정할 수 있습니다.
Stack(
children: [
Container(
width: 200,
height: 200,
color: Colors.red,
),
SizedBox(
width: 100,
height: 100,
child: Container(
color: Colors.blue,
),
),
],
)
위의 예시에서는 빨간색 Container를 꽉 채우는 크기의 Stack 위젯 안에 파란색 Container를 100x100 크기로 배치하고 있습니다. 이와 같은 방식으로 Stack 위젯과 SizedBox 위젯을 함께 사용하여 UI를 다양하게 구성할 수 있습니다.
플러터에서의 Stack 위젯과 SizedBox 위젯을 함께 사용하는 방법에 대해 알아보았습니다. 이러한 방법을 활용하여 다양한 UI 디자인을 구현해보세요!