냥냥박사에디 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은 자동으로 다음 행에 자식 위젯을 배치합니다.

반응형