Flutter[플러터] / Spacer 를 사용하여 간격을 비율에 따라 조정하기 (스페이서, 플렉스, Flex) Spacer (Flutter Widget of the Week)

Spacer class

Spacer는 Flex 컨테이너에서 행이나열과 같은 위젯 간 간격을 조정하는 데 사용할 수 있는 조정 가능한 빈 스페이서를 생성합니다.

Spacer 위젯은 사용 가능한 모든 공간을 차지하므로 Spacer가 포함된 Flex 컨테이너의 Flex.mainAxisAlignment를MainAxisAlignment.spaceAround, MainAxisAlignment.spaceBetween 또는 MainAxisAlignment.spaceEvenly 로 설정하더라도 눈에 띄는 효과는 없습니다. Spacer가 추가 공간을 모두 차지했으므로 다시 분배할 공간이 없습니다.

https://youtu.be/7FJgd7QN1zI

공식 문서 코드

 

---

Spacer 는 Column 이나 Row 안에서 비율에 맞게 간격을 띄우고 싶을 때 사용하는 위젯이다. 사용이 매우 간단하고 기능이 용이하여 사람들이 자주 쓰는 위젯 중에 하나로 자리 잡고 있다. 간단하게 알아보자.

하위 속성

속성명	타입	기본값	설명
flex	int	1	남은 공간을 얼마나 차지할지 결정하는 비율 값

 

Spacer 의 속성은 단 하나, flex 이다. Flutter 에서 Flex 라는 글자는 99퍼센트 전부 비율을 따지는 거라고 생각하면 된다. Spacer 는 Column 이나 Row 안에서 '얼마만큼의 비율을 띄울꺼냐?' 라는 의미를 담은 위젯이라고 할 수 있겠다.

사진과 같이 자신이 만든 컨테이너가 바닥에 딱 붙게 하고 싶을 수 있다. 화면에 맞게 말이다. 이럴 땐 어떠한 방법이 가장 좋을까? 바로 Spacer 사용하는 방법이다.

Container(height: 100, width: 100, color: Colors.blue,),
Spacer(),
Container(height: 100, width: 100, color: Colors.blue,),

 

Spacer 는 기본값으로 flex 1을 가지고 있는데 이를 통해 컨테이너와 컨테이너 사이에 화면의 비율, 1을 차지하는 크기가 들어서면서 각 컨테이너가 양끝으로 붙어버린 모습을 할 수 있겠다. 정확히 말하자면 붙은 건 아니고 Spacer 에 의해서 밀려난 거다.

Spacer(),
Container(height: 100, width: 100, color: Colors.blue,),
Spacer(),
Container(height: 100, width: 100, color: Colors.blue,),
Spacer(),
Container(height: 100, width: 100, color: Colors.blue,),
Spacer(),

 

코드를 이렇게 작성해서 컨테이너 사이에 Spacer 를 넣어주면 이런 결과물이 나오게 된다.

균일하게 크기를 잡아먹은 모습을 볼 수 있다. 근데 이렇게 위젯을 균등하게 배치하고 싶을 땐 굳이 Spacer 안 쓰고 Column 이나 Row 안에 있는 하위 속성을 사용하면 된다. mainAxisAlignment 와 crossAxisAlignment 둘 중에 하나 말이다. 함 짚고 넘어가자.

MainAxisAlignment / crossAxisAlignment  값 설명

값	설명
start	주 축의 시작 지점에 자식들을 최대한 가깝게 배치 가로 방향일 경우 `TextDirection`에 따라 왼쪽 또는 오른쪽이 시작 세로 방향일 경우 `VerticalDirection`에 따라 위 또는 아래가 시작
end	주 축의 끝 지점에 자식들을 최대한 가깝게 배치 가로 방향일 경우 `TextDirection`에 따라 왼쪽 또는 오른쪽이 끝 세로 방향일 경우 `VerticalDirection`에 따라 위 또는 아래가 끝
center	자식들을 주 축의 중앙에 최대한 가깝게 배치
spaceBetween	자식들 사이의 공간을 동일하게 배분하며, 처음과 마지막 자식 사이에만 공간이 생김
spaceAround	자식들 사이의 공간을 동일하게 배분하고, 양 끝 자식 앞뒤에는 그 절반 크기의 공간을 둠
spaceEvenly	자식들 사이뿐 아니라 양 끝 자식의 앞뒤까지 모든 공간을 동일하게 배분

이런 속성들 사용해서 해주면 알아서 정렬된다.

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(height: 100, width: 100, color: Colors.blue,),
    Container(height: 100, width: 100, color: Colors.blue,),
    Container(height: 100, width: 100, color: Colors.blue,),
  ],
),

이렇게 사용하면 아까 전 코드랑 완벽하게 일치하는 코드를 사용할 수 있다. 

근데 보면 알겠지만 이건 속성이 별로 없고 그에 따라 줄 수 있는 바이레이션도 적다. 이래서 Spacer 를 사용하는 것이다. Spacer 는 flex 값을 바탕으로 하고 싶은 만큼 비율을 먹일 수 있으니까 말이다.

Column(
  children: [
    Container(height: 100, width: 100, color: Colors.blue,),
    Spacer(), // flex = 1
    Container(height: 100, width: 100, color: Colors.blue,),
    Spacer(flex: 2,), // 플렉스 1이 차지하는 공간의 두배만큼 공간을 차지함
    Container(height: 100, width: 100, color: Colors.blue,),
  ],
),

실행하면 알 수 있듯이 flex 2를 먹인 곳이 저 공간이 크게 되어 있다는 것을 알 수 있다. 그에 따라 flex 1 의 크기도 상대적으로 줄어든 모습이다.

Spacer 는 Flex 를 기반으로 비율에 따라 상대적으로 크기를 차지하는 위젯이다. 사용하기 굉장히 편한 것도 사실이지만 초보자가 많이 하는 실수가 SingleChildScrollView 같은 사이즈가 정해져 있지 않은 위젯 안에서 사용하려고 한다는 점인데 비율에 따라 크기를 갖는 것이기 때문에 크기가 지정되지 않는 스크롤이 가능한 위젯 안에서는 반드시 SizedBox 같은 걸로 크기를 제한해두고 사용해야만 한다. 도움이 되었길 바라며 마치겠다.

반응형