Flutter의 Wrap 위젯으로 동적 레이아웃 쉽게 구성하기

Flutter에서 Wrap 위젯 사용법

Flutter로 앱을 개발할 때, 여러 개의 위젯을 한 줄에 배치해야 하거나 화면 크기에 맞춰 유동적으로 배치하고 싶을 때가 있습니다. 이럴 때 유용한 것이 바로 Wrap 위젯이죠. 오늘은 Wrap 위젯의 사용법과 장점에 대해 소개해보겠습니다.

 

 

Wrap 위젯이란?

Wrap은 말 그대로 아이템을 감싸주는 레이아웃입니다. 보통 Row나 Column을 사용하면 아이템들이 한 방향으로만 배치돼서 화면 크기에 따라 넘쳐버리는 문제가 생기곤 하는데요. 반면, Wrap은 공간이 부족할 때 자동으로 줄바꿈을 해주기 때문에, 반응형 레이아웃을 쉽게 만들 수 있습니다.

 

 

 

기본 사용법

Wrap 위젯의 기본적인 구조는 아래와 같습니다.

Wrap(
  spacing: 20.0, // 열 사이의 간격
  runSpacing: 20.0, // 행 사이의 간격
  children: [
    // 여기에 들어갈 위젯들
  ],
)

 

여기서 spacing과 runSpacing 속성은 각각 열과 행 사이의 간격을 설정할 수 있습니다. 이를 통해 아이템들이 일정한 간격을 유지하면서 깔끔하게 배치할 수 있죠.

 

 

실제 사용 예시 코드

이제 Wrap 위젯이 실제로 어떻게 동작하는지 코드 예시를 통해 알아보겠습니다. 아래 코드는 SizedBox로 각 타일의 크기를 설정하고, Wrap 위젯을 통해 여러 개의 타일을 화면 크기에 맞게 배치하는 코드입니다.

Center(
  child: Wrap(
    spacing: 20.0, // 열 사이 간격
    runSpacing: 20.0, // 행 사이 간격
    children: [
      SizedBox(
        width: MediaQuery.of(context).size.width * 0.2, // 각 타일의 너비
        child: _buildStatTile(
          context,
          leadingIcon: Icons.text_fields,
          title: "30,000자",
          subtitle: "총 글자 수",
          iconColor: Colors.purple,
        ),
      ),
      SizedBox(
        width: MediaQuery.of(context).size.width * 0.2,
        child: _buildStatTile(
          context,
          leadingIcon: Icons.library_books,
          title: '3,000단어',
          subtitle: '총 단어 수',
          iconColor: Colors.teal,
        ),
      ),
      SizedBox(
        width: MediaQuery.of(context).size.width * 0.2,
        child: _buildStatTile(
          context,
          leadingIcon: Icons.edit,
          title: '300페이지',
          subtitle: '총 페이지 수',
          iconColor: Colors.indigo,
        ),
      ),
      SizedBox(
        width: MediaQuery.of(context).size.width * 0.2,
        child: _buildStatTile(
          context,
          leadingIcon: Icons.event_repeat,
          title: '30일',
          subtitle: '연속 기록일',
          iconColor: Colors.redAccent,
        ),
      ),
    ],
  ),
)

 

Wrap 위젯 속성 설명

1. spacing: 열 사이의 간격을 설정합니다. 예시에서는 20.0으로 설정해서 타일들이 가로로 20픽셀 떨어져 있습니다.
2. runSpacing: 행 사이의 간격을 설정하는 속성입니다. 각 행 사이에 20픽셀의 간격이 생겨서 아이템들이 깔끔하게 정렬되도록 했습니다.
3. SizedBox와 너비 설정: 각 타일의 크기를 MediaQuery.of(context).size.width * 0.2로 설정했습니다. 이 말은 각 타일이 화면 너비의 20%를 차지한다는 뜻인데요. 이렇게 설정하면 모든 요소의 합이 화면 크기를 넘기지 않으므로 한 줄에 4개의 타일이 모두 들어가게 됩니다.

만약 요소가 한 줄에 다 들어가지 않으면 자동으로 다음 줄로 넘어갑니다. Wrap은 이 기능을 통해 화면 크기에 맞게 요소를 유동적으로 배치할 수 있는거죠.

 

실제로 그려진 UI 입니다. 요소들이 한 줄에 4열로 배치된 것을 볼 수 있습니다.

 

 

만약 여기서 width 의 값의 합이 화면 크기를 넘어간다면 어떨까요? 넓이 값을 0.2 가 아닌 0.4 로 2배 늘려보겠습니다.

 

 

요소들이 4열에서 2열로 바뀌고 줄바꿈이 일어났네요. 

 

 

Wrap을 언제 사용할까?

Wrap 위젯은 동적으로 줄바꿈이 필요한 상황에서 유용합니다. 예를 들면, 여러 개의 버튼이나 카드를 한 화면에 나란히 배치하고 싶을 때, 화면 크기에 따라 자동으로 레이아웃이 조정되길 원할 때 사용하면 좋습니다.

 

Wrap의 유용한 활용 예시

• 태그 또는 버튼들이 여러 개 있을 때
• 갤러리나 카드 목록을 보여줄 때
• 가로로도 여러 개, 세로로도 여러 개 나열하고 싶을 때

 

 

 

Flutter에서 Wrap 위젯은 아이템들을 화면 크기에 맞춰 유연하게 배치할 수 있는 유용한 위젯입니다. Row나 Column외에 줄바꿈이 필요한 상황에서 Wrap을 사용해보는 걸 추천드립니다.