[flutter] 플러터 Wrap을 사용하는 프로세스와 방법
목차
Wrap이란?
Wrap은 부모 위젯의 제한된 공간 안에서 자식 위젯들을 자동으로 배치하는 Flutter 위젯입니다. Wrap은 자식 위젯들이 가로 방향으로 일렬로 배치되다가 제한된 너비를 초과하면 다음 줄로 넘어갑니다. Wrap을 사용하면 동적으로 크기가 변하는 위젯들을 효과적으로 배치할 수 있습니다.
Wrap 사용 방법
Wrap 위젯을 사용하기 위해 다음과 같은 단계를 따르세요:
- Wrap 위젯을 앱의 위젯 트리에 추가합니다.
- 자식 위젯들을 Wrap 위젯의 children 속성으로 제공합니다.
- 필요에 따라 Wrap 위젯의 속성들을 설정하여 정렬 방식과 간격을 조절합니다.
다음은 Wrap 위젯의 예시입니다:
Wrap(
spacing: 8.0, // 가로 간격 설정
runSpacing: 4.0, // 세로 간격 설정
alignment: WrapAlignment.center, // 정렬 방식 설정
children: <Widget>[
// 자식 위젯들을 추가
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue,
child: Text('A'),
),
label: Text('Apple'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.green,
child: Text('B'),
),
label: Text('Banana'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.orange,
child: Text('C'),
),
label: Text('Carrot'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.red,
child: Text('D'),
),
label: Text('Date'),
),
],
)
위와 같이 Wrap 위젯을 사용하면 자식 위젯들이 Wrap의 제한된 공간 안에서 자동으로 줄바꿈되어 배치됩니다.
Wrap 프로세스
Wrap 위젯의 동작 프로세스는 다음과 같습니다:
- Wrap 위젯은 자식 위젯들을 가로 방향으로 배치합니다.
- 자식 위젯들의 너비를 측정하고, Wrap 위젯의 너비에 맞춰 배치합니다.
- 자식 위젯들이 Wrap 위젯의 가로 방향 너비를 초과하면 다음 줄로 이동하여 배치합니다.
- 모든 자식 위젯이 배치될 때까지 2단계와 3단계를 반복합니다.