03. Wrap in Flutter [Flutter Widget of the Week 톺아보기

Flutter of the week란?

 공식 유튜브 채널에서 주 1회  Flutter의 다양한 기능, 팁, 패키지등의 사용 사례에 대한 간결하고 유익한 정보를 제공하는 영상시리즈
바로가기

 

Intro

 많은 앱서비스에서 검색시 노출에 도움이 되는 해시태그를 많이 사용하는데요. 몇개가 있을지 모르는 해시태그가 화면을 벗어난 다면 어떻게 UI를 작업해야 할까요? 이러한 고민을 줄여주고 유연한 레이아웃을 제공하는 Wrap 위젯에 대해 안내드리려 합니다.

 

Wrap 위젯이란?

A Wrap lays out each child and attempts to place the child adjacent to the previous child in the main axis, given by direction, leaving spacing space in between. If there is not enough space to fit the child, Wrap creates a new run adjacent to the existing children in the cross axis.

Wrap은 각 child를 이전 child와 인접한 child를 방향별로 주어진 장축에 띄어쓰기 공간을 두고 배치하려고 시도합니다. 자식이 들어갈 공간이 부족하면 Wrap은 기존 자식과 교차축에 인접한 새로운 런을 만듭니다.

 

 정리하자면 Wrap은 가로 또는 세로로 하위 위젯을 배치하고 주어진 공간이 부족하면 하위 위젯들을 자동으로 다음 줄로 넘겨주는 위젯입니다.

Wrap 위젯 사용법

 Intro에서 예로 들었던 다수의 해시태그가 생성되었을때는 크게 2가지 방법이 있을것 같습니다. List View를 사용해 scrollable하게 만들거나 Wrap 위젯을 활용해 다음 줄로 넘기는 방법입니다. 요구사항에 따라 다르겠지만 한눈에 해시태그가 보여야 할경우에는 Wrap위젯을 적절하게 사용해주시면 될것 같습니다.

Wrap 위젯의 속성

spacing

spacing은 가로로 배열된 자식 위젯들 간의 간격을 설정합니다. 값은 double 형태로 지정하며, 양수일 경우 간격이 증가하고 음수일 경우 간격이 감소합니다.

runSpacing

runSpacing은 세로로 배열된 자식 위젯들 간의 간격을 설정합니다. 마찬가지로 double 형태로 값을 지정합니다.

alignment

alignment은 자식 위젯들을 배치하는 방법을 결정합니다. 기본값은 WrapAlignment.start로 시작점에 자식 위젯을 배치합니다. 다양한 정렬 옵션을 사용하여 필요에 따라 위치를 조절할 수 있습니다.

direction

direction은 자식 위젯을 배열할 방향을 결정합니다. 기본값은 Axis.horizontal로 가로 방향으로 배열됩니다. 세로 방향으로 배열하려면 Axis.vertical로 설정할 수 있습니다.

 

사용예제

import 'package:flutter/material.dart';

class WrapScreen extends StatelessWidget {
  const WrapScreen({super.key});

  @override
  Widget build(BuildContext context) {
    List<int> tagNumber = [0, 1, 2, 3, 4, 5];
    return Scaffold(
      appBar: AppBar(
        title: Text('Wrap'),
      ),
      body: SizedBox(
        height: 600,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text('ListView 사용했을때',textAlign: TextAlign.left,style: TextStyle(fontSize: 24),),
                ),
                SizedBox(
                  height: 40,
                  child: ListView(
                    scrollDirection: Axis.horizontal,
                      children: tagNumber.map((e) {
                    return Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      child: Container(
                          child: Center(child: Text('#해시태크$e')),
                          width: 80,
                          height: 40,
                          decoration: BoxDecoration(
                              color: Colors.grey,
                              borderRadius: BorderRadius.circular(8))),
                    );
                  }).toList()),
                ),
              ],
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text('Wrap 사용했을때',textAlign: TextAlign.left,style: TextStyle(fontSize: 24),),
                ),
                Wrap(
                  alignment: WrapAlignment.start,
                  runSpacing: 16,
                  children: tagNumber.map((e) {
                    return Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      child: Container(
                          child: Center(child: Text('#해시태크$e')),
                          width: 80,
                          height: 40,
                          decoration: BoxDecoration(
                              color: Colors.grey,
                              borderRadius: BorderRadius.circular(8))),
                    );
                  }).toList(),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}