[Flutter][Widget] Spacer 위젯

Spacer란?

---

Spacer는 Row와 Column과 같은 Flex Container (이는 뒤에서 알아볼 것이다.)의 공간을 조절하는 빈 공간을 만들어주는 위젯이다.

이름 그대로 Space + er로 공간을 만들어주는 위젯이다.

Spacer 위젯은 추가적인 공간을 잡는 위젯이기 때문에 Flex container안에 있는 Flex.mainAxisAlignment를

MainAxisAlignment.spaceAround,

MainAxisAlignment.spaceBetween,

MainAxisAlignment.spaceEvenly

로 설정하면 추가 공간을 모두 차지했으므로 재배포할 공간이 남아 있지 않아 가시적인 효과가 없다.

 

즉, Spacer는 MainAxisAlignment 속성을 모두 무시한다는 것이다.

 

Spacer 사용예시

Spacer();

 

Spacer는 위와 같이 단순히 저렇게 작성하는 것으로 적용이 가능하다.

좀 더 자세한 사용 예시는 아래와 같다. ▼

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text(
          "hello",
          style: TextStyle(fontSize: 24),
        ),
        Spacer(),
        Text(
          "I'm",
          style: TextStyle(fontSize: 24),
        ),
        Spacer(),
        Text(
          "Gorani",
          style: TextStyle(fontSize: 24),
        ),
      ],
    );
  }
}

 

이렇게 코드를 작성하고 실행시키면 빈 공간을 꽉 채우게 공간이 할당된다.▼

 

 

그러면 Flex.mainAxisAlignment 를 설정하면 어떻게 될까?

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Text(
          "hello",
          style: TextStyle(fontSize: 24),
        ),
        Spacer(),
        Text(
          "I'm",
          style: TextStyle(fontSize: 24),
        ),
        Spacer(),
        Text(
          "Gorani",
          style: TextStyle(fontSize: 24),
        ),
      ],
    );
  }
}

 

이렇게 코드를 작성하고 실행시키면 Flex.mainAxisAlignment를 설정하지 않은 것과 똑같은 결과가 나타난다.▼

 

 

Properties

---

Spacer 위젯에서 가장 중요한 Property는 flex Property다.

 

flex

flex -> int

첫번째 인자는 flex로 int 타입을 받는다.

이 flex의 의미는 공간을 어느 정도로 차지하는지에 대한 배율을 의미한다.

만약에 아래와 같이 Spacer를 설정했다고 하면,

Spacer(flex: 2)

 

공간이 더 할당된 것을 알 수 있다.▼

 

 

다른 위젯들보다 2배 더 공간을 할당한다는 것이다.

Spacer 위젯은 굉장히 단순하기에 property도 flex 하나만 채워주면 된다.

 

 

사용시 주의점

---

Spacer는 두 위젯 사이의 남은 공간을 다 채워준다.

 

 

"그런데 남은 공간은 어떤 위젯을 기준으로 할까?"

 

 

괜히 물어봤나 싶을 정도로 아주 당연하게 부모 위젯을 기준으로 정의가 된다.

대부분의 위젯들이 공간을 차지할 때 부모 위젯을 기준으로 차지하곤 한다.

 

그리고 Spacer를 사용할 때 주의해야하는 부분도 바로 이 점이다.

Spacer를 사용할 때 크기가 정확하게 정의되어있지 않으면 오류가 난다.

 

이전까지는 별 문제 없었는데?

Container나 SizedBox에 별 다른 너비나 높이 값을 넣지 않아도 Spacer를 넣어주면 알아서 공간을 잘 맞춰준다.

이는 Container와 SizedBox가 기본적으로 화면 크기에 종속되기 때문이다.

이 두 위젯은 별도 설정을 하지 않는 이상 기기의 전체 화면을 넘어가지 않는다.

게다가 너비나 높이 값을 정의하지 않으면 child로 들어간 자식 위젯의 크기에 알맞게 맞춰준다.

이런 위젯들의 경우엔 별도 정의가 없어도 최대치가 이미 정해져있거나 일반적으로 자식 크기에 맞추기에 기본적인 값들이 정의되어 있다.

 

하지만 Column, Row, Scroll View로 넘어가면 이야기가 많이 달라진다.

 

Column, Row, ScrollView

이 위젯들은 여러 개의 자식 위젯들을 가진다.

그런데 자식 위젯들이 얼마나 들어올 지 모르기 때문에 이 클래스들은 스스로의 크기가 정해져있지 않다.

 

 

"아니 자식 클래스들의 너비랑 높이를 계산하면 그게 스스로의 크기잖아요?"

 

 

이에 대해서는 플러터의 위젯이 기본적으로 트리구조임을 생각해야한다.

아래로 내려가면서 위젯을 읽는데, Column, Row, ScrollView 위젯들을 래핑한 위젯이 해당 위젯들을 읽을 때는 아직 계산이 덜 마쳐진 상황이다.

그렇기에 위의 위젯들은 크기가 명확히 정해져있지 않다.▼

 

 

Q. 아니아니 그러면 자식 클래스 한 번 읽고 온 다음에 다시 만들면 되잖아요?
A. 그런 식으로 위젯을 그리게 되면 고려해야할 사항이 굉장히 많아지게 되고 시스템 아키텍쳐 상으로도 통일성이 없어지기에 그렇게 읽는 방식을 취하지 않는다.

 

그런데 해당 위젯들의 자식 클래스로 Spacer를 넣게 되면, Spacer는 혼란에 빠진다.

spacer 투입

 

 

 

‘내 부모 클래스는 높이나 너비가 정해진게 없는걸?‘

‘그러면 공간을 무한대로 차지해야하나?’

무한하게 먹어야하나 고민중

 

 

그러나 무한대로 차지할 수 없으니 오류를 반환한다.

 

그럼 Column, Row, ScrollView엔 Spacer를 못넣는건가?

Spacer는 부모 위젯의 크기를 읽고 그에 맞춰 늘려주는데, Flexable한 위젯들이 부모 위젯이라 크기를 모르는게 문제였다.

하지만 자식 위젯의 경우엔 바로 위의 위젯만 읽는 것이 아니라 최상단에 위치한 부모 위젯까지 읽는다.

그렇기에 Flexable한 위젯들을 Flexable하지 않은 위젯으로 감싸주면 부모의 높이 너비를 읽어와 해결이 된다. ▼

 

최상단 부모 위젯의 너비 높이를 읽어온다.

 

 

마치며

---

Spacer 위젯은 Align이 적용되지 않는 Column과 Row에서 유용하게 사용된다.

양 끝에 위젯을 배치하고 싶거나, 간격 상관없이 균일하게 위젯들을 떨어뜨려놓고 싶을 때 굉장히 유용하다.

하지만 부모 클래스에 크기가 정의되어있지 않다면 오류가 발생하니 주의해서 사용하자.