[flutter] 플러터 Wrap을 통해 어떤 기술을 구현할 수 있을까요?
목차
Wrap이란?
플러터에서 Wrap은 여러 개의 자식 위젯들을 행이나 열로 배치할 수 있는 위젯입니다. Wrap은 자식 위젯들이 컨테이너 크기를 벗어날 때, 자동으로 다음 행이나 열로 넘어가게 되어 유연한 배치를 구현할 수 있게 해줍니다.
기능 1: 유동적인 아이템 배치
Wrap을 사용하면 한 행에 모든 아이템을 배치할 수 없을 때, 자동으로 다음 행에 나머지 아이템을 넘겨줍니다. 이를 이용하면 유동적인 아이템 배치를 할 수 있습니다.
Wrap(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 150,
height: 150,
color: Colors.green,
),
Container(
width: 200,
height: 200,
color: Colors.blue,
),
Container(
width: 250,
height: 250,
color: Colors.orange,
),
Container(
width: 300,
height: 300,
color: Colors.purple,
),
],
)
기능 2: 다중 행 아이템 배치
Wrap은 필요한 만큼의 행을 생성하여 아이템을 배치할 수 있습니다. 이를 활용하면 다중 행에 아이템을 배치하는 기능을 구현할 수 있습니다.
Wrap(
direction: Axis.vertical, // 수직 방향으로 아이템 배치
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 150,
height: 150,
color: Colors.green,
),
Container(
width: 200,
height: 200,
color: Colors.blue,
),
Container(
width: 250,
height: 250,
color: Colors.orange,
),
Container(
width: 300,
height: 300,
color: Colors.purple,
),
],
)
기능 3: 아이템 간격 및 정렬 조절
Wrap은 아이템 간격과 정렬을 조절할 수 있는 여러 가지 속성들을 제공합니다.
Wrap(
spacing: 10, // 아이템 간격 조절
runSpacing: 20, // 행과 행 사이의 간격 조절
alignment: WrapAlignment.center, // 아이템 정렬 방식
crossAxisAlignment: WrapCrossAlignment.center, // 아이템 수직 정렬 방식
children: <Widget>[
// ...
],
)
위의 예제에서 spacing은 아이템 간의 가로 간격을 조절하고, runSpacing은 행과 행 사이의 세로 간격을 조절합니다. alignment은 아이템을 수평으로 가운데 정렬하는 속성이며, crossAxisAlignment는 아이템을 수직으로 가운데 정렬하는 속성입니다.
참고 자료
위에 설명한 기능 외에도 Wrap은 다양한 속성들을 가지고 있으며, 자세한 내용은 Flutter Wrap documentation을 참고하시기 바랍니다.