코드로 우주평화
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 위젯 속성 설명
spacing
: 열 사이의 간격을 설정합니다. 예시에서는20.0
으로 설정해서 타일들이 가로로 20픽셀 떨어져 있습니다.runSpacing
: 행 사이의 간격을 설정하는 속성입니다. 각 행 사이에 20픽셀의 간격이 생겨서 아이템들이 깔끔하게 정렬되도록 했습니다.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을 사용해보는 걸 추천드립니다.
'나는 이렇게 학습한다 > App' 카테고리의 다른 글
flutter _ 날짜 사용법(DateTime, Duration, difference, isAfter, isBefore, add, substract) (0) | 2023.01.01 |
---|---|
flutter _ PageView 와 PageController, Timer 사용방법 (0) | 2023.01.01 |
flutter _ WebView 위젯에서 홈으로 이동, 뒤로가기, 새로고침 (2) | 2022.12.19 |
flutter _ webview_flutter 를 이용해 앱에서 웹페이지 불러오기 (2) | 2022.12.17 |