Wrap

Flutter에서 콘텐츠 배치 관리하기: Wrap

애플리케이션에서 유동적인 레이아웃을 구현하는 것은 사용자 인터페이스 설계에서 중요한 고려사항입니다. Wrap 위젯은 여러 위젯들이 가용 공간을 벗어날 때 다음 줄로 자동으로 넘어가도록 하여, 유연한 레이아웃을 제공합니다. 이는 특히 동적 콘텐츠가 많은 화면에서 유용합니다.

주요 속성

• direction: 위젯들이 배치될 방향을 결정합니다. 기본값은 Axis.horizontal입니다.
• alignment: 주축을 기준으로 위젯들을 어떻게 정렬할지 결정합니다. 기본값은 WrapAlignment.start입니다.
• spacing: 같은 줄에 있는 위젯들 사이의 간격을 지정합니다.
• runSpacing: 다른 줄에 있는 위젯들 사이의 간격을 지정합니다.
• crossAxisAlignment: 교차 축을 기준으로 위젯들을 어떻게 정렬할지 결정합니다.

주요 활용도

• 태그 또는 칩 표시: 사용자가 태그나 칩 같은 요소를 추가할 때, 이 요소들이 화면 크기를 초과하면 자동으로 다음 줄로 넘어가게 합니다.
• 동적 콘텐츠의 유연한 배치: 콘텐츠의 양에 따라 유연하게 레이아웃을 조정합니다.
• 반응형 디자인 지원: 다양한 화면 크기에 대응하여 적절한 사용자 경험을 제공합니다.

코드 예제

아래 예제는 Wrap 위젯을 사용하여 여러 개의 Chip을 유동적으로 배치하는 방법을 보여줍니다.

Wrap(
  spacing: 8.0, // 수평 간격
  runSpacing: 4.0, // 수직 간격
  children: <Widget>[
    Chip(
      label: Text('칩 #1'),
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('1')),
    ),
    Chip(
      label: Text('칩 #2'),
      avatar: CircleAvatar(backgroundColor: Colors.green, child: Text('2')),
    ),
    Chip(
      label: Text('칩 #3'),
      avatar: CircleAvatar(backgroundColor: Colors.red, child: Text('3')),
    ),
    // 여기에 더 많은 칩을 추가할 수 있습니다.
  ],
)

추가 팁

• 적절한 간격 사용: spacing과 runSpacing을 적절히 설정하여, 위젯들 사이의 공간을 조절하고 레이아웃의 가독성을 높입니다.
• 방향 조절: direction 속성을 활용하여 위젯들이 수평 또는 수직으로 배치되도록 할 수 있습니다.

관련 자료

• Chip: 라벨, 아이콘, 또는 액션을 포함할 수 있는 컴팩트한 요소입니다. Wrap 위젯과 함께 사용되어 동적인 요소 리스트를 효과적으로 표현할 수 있습니다.

추가 참고 리소스

• Wrap (Flutter Widget of the Week)
• 공식 문서 -Wrap