[Flutter] Widget 소개 - SizedBox

SizedBox

const SizedBox({ Key key, this.width,this.height, Widget child })

SizedBox 는 크게 두 가지 목적으로 사용이 됩니다.

• child widget의 size를 강제하기 위해서
• Row, Column에서 widget 사이에 빈 공간을 넣기 위해서

Center(
  child: SizedBox(
    height: 300,
    width: 200,
    child: Container( color: Colors.blue),
  ),
));

SizedBox의 height나 width 의 값을 double.infinity를 사용 할 경우 Parrent의 최대 size를 set하게 됩니다.

SizedBox의 height나 width의 default 값은 double.infinity 입니다.

아래와 같이 Sizedbox가 중첩이 된 상태에서 Parrent의 Size가 Child보다 작지만 Child의 Size는 Parrent의 Size로 강제가 됩니다.

Center(
  child: SizedBox(
    width: 300,
    height: 300,
    child: SizedBox(
      child: Container(color: Colors.blue),
    ),
  ),
));

Reference

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