[Flutter] 위젯 사이에 간격 두기 (SizedBox vs Spacer)

SizedBox

1. Row, Column 위젯에서 간격을 만들 때 사용한다.

width, height 값을 지정해주는 지정된 크기의 위젯이다.

Row(
  children: [
    Text(),
    // Row에서는 height가 고정되고 Column에서는 width가 고정되므로 하나만 지정하면 된다.
    SizedBox(
      width: 20
     ),
    Text(),
  ],
)

 

 

2. Container 등 child 위젯의 크기를 지정할 때 사용한다.

SizedBox(
  width: 200,
  child: Container(),
 )

 

참고) Container와 SizedBox의 차이

width와 height를 지정하지 않았을 경우, Container는 최대 크기로 확장되며 SizedBox는 child 크기에 맞게 적용된다.

 

Spacer

주로 Row, Column 위젯에서 간격을 만들 때 사용된다.

flex 속성을 사용하여 남은 공간만큼 확장하는 위젯이다.

child: Row(
  children: [
    Text(),
    // flex의 기본값은 1이고 2를 주면 다른 Spacer보다 2배의 공간을 만든다.
    Spacer(
      flex: 2,
    ),
    Text(),
    Spacer(),
    Text(),
  ]
)

 

차이점

주로 지정된 간격을 주고 싶을 때는 SizedBox를 사용하고,

디바이스 크기에 따라 비율적으로 간격을 주고 싶을 때는 Spacer를  사용하면 된다.

 

 

references

https://api.flutter.dev/flutter/widgets/SizedBox-class.html

https://www.youtube.com/watch?v=7FJgd7QN1zI 

https://api.flutter.dev/flutter/widgets/Spacer-class.html