[flutter] 플러터 스택드 위젯의 종류와 기능 설명
플러터(Flutter)에서 스택(Stack)은 다른 위젯들을 겹쳐서 배치할 수 있게 해주는 유용한 기능을 제공합니다. 이를 통해 UI 디자인에서 유연성과 다양성을 높일 수 있습니다. 플러터에서는 다양한 스택드(Stacked) 위젯을 제공하고 있으며, 각각의 위젯은 고유한 기능과 특징을 가지고 있습니다.
1. Positioned 위젯
Positioned 위젯은 부모 위젯인 Stack 위젯 내에서 자식 위젯의 위치를 지정하는 데 사용됩니다. 이를 통해 각 자식 위젯을 원하는 위치에 자유롭게 배치할 수 있습니다.
Stack(
children: <Widget>[
Positioned(
top: 10.0,
left: 10.0,
child: Container(
color: Colors.red,
width: 100.0,
height: 100.0,
),
),
Positioned(
bottom: 10.0,
right: 10.0,
child: Container(
color: Colors.blue,
width: 100.0,
height: 100.0,
),
),
],
)
2. IndexedStack 위젯
IndexedStack 위젯은 인덱스를 사용하여 여러 개의 자식 위젯 중 하나를 선택적으로 표시할 수 있습니다. 이 때문에 탭 뷰나 페이지 뷰 등 다양한 상황에서 유용하게 활용될 수 있습니다.
IndexedStack(
index: _selectedIndex,
children: <Widget>[
Container(
color: Colors.red,
width: 200.0,
height: 200.0,
),
Container(
color: Colors.blue,
width: 200.0,
height: 200.0,
),
],
)
3. Align 위젯
Align 위젯은 상위 위젯의 크기 내에서 자식 위젯을 정렬하는 데 사용됩니다. alignment 속성을 통해 자식 위젯의 정렬을 유연하게 조절할 수 있습니다.
Container(
color: Colors.yellow,
width: 300.0,
height: 300.0,
child: Align(
alignment: Alignment.bottomRight,
child: Container(
color: Colors.green,
width: 100.0,
height: 100.0,
),
),
)
스택을 활용하여 UI를 유연하게 디자인하고 배치할 수 있도록 도와주는 위젯들은 많이 있지만, 이 중에서 Positioned, IndexedStack, Align 위젯은 가장 자주 사용되는 기본적인 스택드(Stacked) 위젯입니다. 그 외에도 다양한 스택드 위젯들이 있으니 필요에 따라 활용해보세요.