함께 공부하는 Flutter
[Flutter] Wrap
냥냥박사에디
2023. 4. 30. 19:07
반응형
Flutter에서 Wrap은 자식 위젯들을 행과 열로 묶어서 표시할 수 있게 해주는 위젯입니다. Wrap은 자식 위젯들의 폭이나 높이가 제한된 상황에서 유용하게 사용됩니다. 만약 자식 위젯들이 모두 같은 크기를 가지고 있지 않거나, 자식 위젯의 크기를 알 수 없을 때, Wrap을 사용하여 자식 위젯을 자동으로 배치할 수 있습니다.
다음은 Wrap을 사용하여 자식 위젯을 자동으로 배치하는 간단한 예시 코드입니다.
Wrap(
spacing: 8.0, // 위젯간 간격
runSpacing: 4.0, // 행 또는 열간 간격
children: <Widget>[
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('A')),
label: Text('Apple'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('B')),
label: Text('Banana'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('C')),
label: Text('Cherry'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('D')),
label: Text('Durian'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('E')),
label: Text('Elderberry'),
),
],
)
위 코드는 5개의 Chip 위젯을 Wrap에 포함시켜 각 행마다 8.0의 간격을 두고 자동으로 배치하도록 합니다. 만약 화면 폭이 부족하여 다음 행으로 넘어가야 할 경우 Wrap은 자동으로 다음 행에 자식 위젯을 배치합니다.
반응형