[캡스톤_front] Spacer 사용법

막연하게 버튼을 아래로 가게 하기 위해 사용하는 위젯이라고만 알고 있다.
그런데 정확히 어떤 원리로 버튼을 아래로 가게 하는데 이것을 사용하는 것일까?
오늘은 이에 대해 한 번 알아보자.

Spacer

What is spacer?

스페이서는 row, column등에서 사용이 가능한, 공간을 띄워 주는 위젯이다.

예시 코드

공식 문서에서 제시한 스페이서의 예시 코드를 살펴보자.

const Row(
  children: <Widget>[
    Text('Begin'),
    Spacer(), // Defaults to a flex of one.
    Text('Middle'),
    // Gives twice the space between Middle and End than Begin and Middle.
    Spacer(flex: 2),
    Text('End'),
  ],
)

스페이서는 다음과 같이 flex 값을 줄 수 있다.
이는 방금전에 본 Expended와 어느정도 일치하는 부분이다.
이를 통해 Spacer들 간의 크기 조정이 가능한데, spacer(flex:2)와 같이 설정할 경우, flex 속성을 설정하지 않은 쪽의 2배만큼의 공간을 차지하게 된다.

---

참고

• https://api.flutter.dev/flutter/widgets/Spacer-class.html
• https://velog.io/@sharveka_11/Spacer