Flutter – SizedBox – 개발 공작소

사이즈를 강제하는 Widget으로 부모 Widget이 허용하지 않을경우 무시된다고 한다. 사용 용도를 확인하기위해 많이 검색해보았지만 실제 개발할때 사용되는 방법은 widget간 간격을 조정할때 많이 사용된다고 하고 그 이외에는 다른 Widget을 사용하는것 같아.

투명한 박스 생성

아무런 속성을 추가하지 않고 높이:50, 너비:50인 투명한 박스를 생성한다.

return SizedBox(
  width: 100,
  height: 100,
);

SizedBox에 색상을 바로 설정할수없고, 다른 widget의 속성으로 설정할수 있다.

return SizedBox(
  width: 50,
  height: 50,
  child: Container(
    color: Colors.red,
  ),
);

SizedBox는 사이즈 설정에 최적화되어 있고 다른 속성을 추가하기위해서는 다른 widget을 사용해야한다.

만약 빨간색 박스가 필요하다면 아래와 같이 Container widget을 사용하는것이 효율적으로 보인다.

return Container(
  width: 50,
  height: 50,
  color: Colors.red,
);

SizedBox widget은 Container widget에 비해 적은 리소스를 사용하므로 widget끼리의 간격조정에 많이 사용되는것으로 보인다.

body: Column(
  children: [
    BoxWidget(),
    SizedBox(height: 50,),
    BoxWidget(),
  ],
)