[flutter] 행 데이터 자동으로 줄 바꿔주는 wrap 위젯 사용법

플러터에서 행 데이터 자동으로 다음 줄로 바꿔주는 Wrap 위젯

앱을 만들다 보면 너비가 일정하지 않은 데이터를 순차적으로 나열하면서 자동으로 줄 바꿈까지 되게끔 구현하고 싶은 경우가 있습니다. 예를 들면 #플러터 #위젯 #줄바꿈 같은 태그를 나타낼 때가 있습니다.

 

그런데 여러 개의 위젯을 나열하기 위해 Row()를 사용해보면, children에 속한 위젯의 너비가 Row의 너비를 초과할 경우, 다음과 같은 픽셀 오류가 발생하면서 줄 바꿈이 안되는 것을 확인할 수 있습니다.

A RenderFlex overflowed by 300 pixels on the right.

 

이때 Wrap 위젯을 사용하면 문제를 간단히 해결할 수 있습니다. Wrap 위젯은 자식 위젯을 하나씩 순차적으로 채워가면서 너비를 초과하면 자동으로 다음 줄에 이어서 위젯을 채워줍니다. 

 

제가 글을 작성했지만 글보다는 예시를 보시는게 나을 것 같네요...😅

 

Wrap 위젯 적용하기

이제 Wrap 위젯을 사용하여 직접 예시 코드를 작성해볼게요! 정말 간단합니다. 그 전에 Wrap 위젯 옵션 값도 참고해 보세요.

 

- direction : horizontal, vertical (나열 방향)

- alignment : start, end, center, spaceAround, spaceBetween, spaceEvenly

- spacing : double 값 (좌우 간격)

- runSpacing : double 값 (상하 간격)

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Wrap Widget Example'),
    ),
    body: Center(
      child: Wrap(
        direction: Axis.horizontal, // 나열 방향
        alignment: WrapAlignment.start, // 정렬 방식
        spacing: 5, // 좌우 간격
        runSpacing: 5, // 상하 간격
        children: [
          Container(
            padding: const EdgeInsets.all(6),
            decoration: BoxDecoration(
              color: const Color(0xffdddddd),
              borderRadius: BorderRadius.circular(6),
            ),
            child: Text('#태그1'),
          ),
          Container(
            padding: const EdgeInsets.all(6),
            decoration: BoxDecoration(
              color: const Color(0xffdddddd),
              borderRadius: BorderRadius.circular(6),
            ),
            child: Text('#태그22'),
          ),
          Container(
            padding: const EdgeInsets.all(6),
            decoration: BoxDecoration(
              color: const Color(0xffdddddd),
              borderRadius: BorderRadius.circular(6),
            ),
            child: Text('#태그333'),
          ),
          Container(
            padding: const EdgeInsets.all(6),
            decoration: BoxDecoration(
              color: const Color(0xffdddddd),
              borderRadius: BorderRadius.circular(6),
            ),
            child: Text('#태그4444'),
          ),
          Container(
            padding: const EdgeInsets.all(6),
            decoration: BoxDecoration(
              color: const Color(0xffdddddd),
              borderRadius: BorderRadius.circular(6),
            ),
            child: Text('#태그55555'),
          ),
        ],
      ),
    ),
  );
}

 

여기까지 Wrap 위젯을 이용해서 자동으로 줄 바꿈하는 방법에 대해 알아봤습니다. 참고로 한 줄에 위젯 3개씩과 같이 행의 자식 위젯 개수를 고정하려면 GridView 위젯을 사용하시면 됩니다.

 

👉🏻 카드 리스트 쉽게 만들어주는 그리드뷰 (GridView)

 

그럼 즐거운 플러터 개발하시길 응원하겠습니다. 감사합니다~😊