[flutter] sizebox , spacer (with. flutter widget of the week)

오늘은 widget과 widget 사이의 공간 을 넣고 싶을 때 사용하는 sizebox와 spacer에 대해서 적어보려고 한다.

sizebox

sizebox는 위젯 사이에 공간을 줄 때, child 위젯에 size를 강제로 부여할 때 두 경우 이용하는 위젯이다.

sizebox는 정확한 수치를 입력함으로써 크기를 지정한다.

Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    Text(
                      "이용약관",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 12,
                        decoration: TextDecoration.underline,
                      ),
                    ),
                    SizedBox(
                      width: 14,
                    ),
                    Text(
                      "개인정보 처리방침",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 12,
                        decoration: TextDecoration.underline,
                      ),
                    ),
                  ],
                ),

무한대로도 크기를 설정할 수 있는데, (width : double.infinity) 이 때 부모요소가 허용하는 만큼 확장된다.

sizebox 위젯은 자식 요소의 크기를 정해줘야 할 때나 위젯간의 간격이 정확한 수치로 나와있을 때 이용하기 좋은 위젯인 것 같다.

spacer

spacer도 sizebox 처럼 위젯 사이의 간격을 조정하는데 사용되는 위젯이다.

처음 flutter를 이용해 UI를 그렸을 때는 냅다 sizebox만 이용해서 공간을 줬었는데, flutter widget 유튜브를 보면서 spacer을  처음 접하게 되었다. 

Column(
              children: const [
                Center(
                  child: Text(
                    "Quiz",
                    style: TextStyle(
                      fontSize: 36,
                      fontWeight: FontWeight.w600,
                      color: Colors.white,
                    ),
                  ),
                ),
                Text(
                  "English study",
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w600,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
            const Spacer(),
            Column(
              children: const [
                LoginButtonWidget(
                  icon: 'assets/svgs/google-icon.svg',
                  isWhite: true,
                  socialName: '구글',
                ),
                SizedBox(
                  height: 18,
                ),
                LoginButtonWidget(
                  icon: 'assets/svgs/apple.svg',
                  isWhite: false,
                  socialName: 'Apple',
                ),
              ],
            ),

spacer는 spaceBetween 처럼 일정한 간격을 두고 정렬할 수 있도록 되어있다.
사용가능한 모든 공간을 차지하며, 비율을 지정해서 상대적인 간격을 설정할 수 있다. 

Row(
	children:[
    	ColorBox(),
        Spacer(2),
        ColorBox(),
        Spacer(1),
        ColorBox(),
        ],
      )

이렇게 2:1 비율로 간격을 조정하면 아래와 같은 간격을 설정할 수 있다.

---

두 개 다 공간을 줄 때 사용하는 위젯 같은데.. 언제는 sizebox를 쓰고 언제는 spacer 를 쓰는 것일까?

정확한 수치를 입력해서 공간을 지정해 줄 것인지, 근처에 있는 다른 위젯들에 의해 사이즈가 지정되게 할 것인지에 따라 다른 것 같다

어플에 적용한 화면이다. 

부제와 로그인 창을 구분 할 때 spacer를 사용했는데, 알아서 적당하게 간격이 생성되었다.
이와 같은 구성을 sizebox로 만들기 위해서는 size를 몇으로 줘야 적당할지 다 재고, 늘리고 줄여가며 적당한 길이를 맞춰야 하는 복잡한 과정이 함께 이루어질 것 같다.

하지만 sizebox도 사용해야 하는 적당한 곳이 있을테니.. 상황에 맞는 위젯을 사용하자 !

---

참고

https://www.youtube.com/watch?v=7FJgd7QN1zI&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=111

https://www.youtube.com/watch?v=EHPu_DzRfqA&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=116