Flutter[플러터] / SizedBox 를 사용하여 사이즈 지정하기 (크기, 차지) SizedBox (Flutter Widget of the Week)

SizedBox class

크기가 지정된 상자.

자식 위젯이 주어지면, 이 위젯은 해당 위젯의 특정 너비 및/또는 높이를 갖도록 강제합니다. 부모 위젯에서 허용하지 않으면 이 값은 무시됩니다. 예를 들어, 부모 위젯이 screen(자식 위젯의 크기를 부모 위젯과 동일하게 설정)이거나, 다른 SizedBox (자식 위젯의 너비 및/또는 높이를 특정 값으로 설정)인 경우 이러한 문제가 발생합니다. 이 문제는 자식 위젯 SizedBox를 Center 또는 Align 과 같이 부모 위젯의 크기까지 원하는 크기로 설정할 수 있는 위젯으로 래핑하여 해결할 수 있습니다.

너비나 높이가 null이면, 이 위젯은 해당 차원에서 자식 위젯의 크기에 맞춰 크기를 조정합니다. 자식 위젯의 크기가 부모 위젯의 크기에 따라 달라지는 경우, 너비와 높이를 반드시 제공해야 합니다.

자식 요소가 지정되지 않은 경우, SizedBox는 부모 요소의 제약 조건을 고려하여 지정된 높이와 너비에 최대한 가깝게 크기를 조정합니다. 높이나 너비 가 null이거나 지정되지 않으면 0으로 처리됩니다.

SizedBox.expand 생성자 를 사용하면 부모 요소에 맞춰 크기가 조정되는 SizedBox를 만들 수 있습니다. 이는 width 와 height를 double.infinity 로 설정하는 것과 같습니다.

https://youtu.be/EHPu_DzRfqA

공식 문서 코드

 

---

사진처럼 두 박스 사이의 공간을 벌리고 싶을 수 있다. 어떻게 저 공간을 벌릴 수 있을까? 그럴 땐 SizedBox 위젯을 사용하면 된다.

 

SizedBox 는 고정 크기의 박스를 만들거나, 자식 위젯의 크기를 제한하기 위해 사용된다. SizedBox 의 주기능은 크기를 갖는 것인데 굳이 자식도 필요 없고 SizedBox 단독으로 사용해도 아무런 문제가 없는 '크기' 그 자체인 위젯이다. 근데 이제 자식을 감싸서 부모가 되면 자식의 크기를 지정해 줄 수도 있게 된다. 한번 알아보자.

하위 속성

속성명	타입	기본값	설명
child	Widget?	null	박스 안에 배치할 자식 위젯
width	double?	null	박스의 고정 너비를 지정
height	double?	null	박스의 고정 높이를 지정

 

진짜 별거 없다. 크기를 갖는 것. 그리고 그 자식의 크기를 지정해 줄 수 있는 것. 이게 끝이다. 하지만 그렇기에 가장 많이 사용되는 위젯이 바로 SizedBox 다. 사용하는 방법은 간단하다. SizedBox 를 만들고 넣고 싶은 크기를 넣어주면 된다.

SizedBox(width: 10,),

 

이렇게 만들면 가로를 10만큼 차지하게 된다. 이 SizedBox 자체만을 사용한다면 말 그대로 크기만을 갖기 때문에 어떠한 상호작용도 되지 않는다. 왜냐하면 진짜 그냥 빈 공간. 가로로 10만큼 차지하고 있는 공간 그 자체이기 때문이다. 그렇다면 자식을 넣어주면 어떻게 될까?

SizedBox(
  width: 100,
  height: 100,
  child: FlutterLogo(),
),

FlutterLogo라는 위젯의 기본크기를 무시하고 가로 100, 세로 100 크기의 위젯으로 확장시켜 주게 된다. 이게 바로 SizedBox 의 가장 큰 활용처인데 크기가 지정되어 있지 않거나 크기가 지정되어야 하는 위젯의 크기를 지정해 줄 수 있는 것이다.

 

ListView 를 예로 들어보자. 이 위젯은 리스트를 만들어주는 위젯인데 리스트라는 것의 특성상 스크롤이 되기 때문에 크기를 무한히 갖게 된다. 그래서 ListView 단독으로 사용하게 되면 사이즈 오류가 나는데 그럴때 ListView 를 SizedBox 로 감싸고 크기를 먹여주게 되면 ListView 가 크기를 갖게 되면서 오류가 나지 않는다.

SizedBox(
  width: 75,
  height: 125,
  child: ListView(),
),

 

솔직히 다 아는 내용일 것이고 모른다 하더라도 5분도 아니라 한 3분 정도면 이 위젯을 마스터할 수 있을 것이다. 허나 지금까지 나도 몰랐던 기능이 있다. SizedBox 에는 놀랍게도 상수(생성자)가 있다.

상수 생성자

생성자	설명
SizedBox.expand()	자신의 부모 위젯이 허용하는 최대 크기까지 확장됨 (가로, 세로 double.infinity)
SizedBox.shrink()	가로 세로가 0인 크기로 설정되어 아무 공간도 차지하지 않음
SizedBox.square({dimension})	정사각형 크기의 박스를 생성하며, width = height = dimension
SizedBox.fromSize({size})	주어진 Size(width, height) 객체를 기준으로 크기 지정

 

SizedBox.expand()

이 상수는 이렇게 구성되어 있는데

/// Creates a box that will become as large as its parent allows.
const SizedBox.expand({super.key, super.child})
  : width = double.infinity,
    height = double.infinity;

 

보시다시피 가로 세로 전부 double.infinity 를 먹여주고 있는 모습이다. 이걸 사용한다면 예상을 했다시피 그냥 차지할 수 있는 사이즈를 전부 차지한다고 생각하면 된다. 당연하게도 스크롤이 가능하거나 화면의 끝이 지정되어 있지 않는 환경 안에서는 쓰면 hasSize 오류가 날 것이다.

 

SizedBox.shrink()

이건 설명을 까보면 조금 이상하다고 느낄 수 있다.

/// Creates a box that will become as small as its parent allows.
const SizedBox.shrink({super.key, super.child}) : width = 0.0, height = 0.0;

 

보면 width = 0, height = 0 이렇게 되어 있는데 그러면 이렇게 생각할 수 있다. '이거 아무 의미 없는 위젯 아니야?'라고. 맞다. 아무 의미 없다. 그렇기에 사용되는 것이다. 사용되는 곳은 아무것도 표시하지 않지만 위젯이 자리를 차지(유지) 해야 할 때 쉽게 말해서 진짜 그냥 자리 차지용이다. 이건 솔직히 비추긴 하다. 이거 쓸빠에 SizedBox() 이거 딸깍하는데 한 0.5초 더 빠르다. 음음 그래도 이건 width 나 height 가 null 이 아닌 상태라 더 안정적이다.

 

SizedBox.square({dimension})

이건 꽤 쓸만하다. 시간 절약용 생성자 느낌인데 width 랑 height 의 크기를 갖게 만들어준다.

/// Creates a box whose [width] and [height] are equal.
const SizedBox.square({super.key, super.child, double? dimension})
  : width = dimension,
    height = dimension;

코드를 까보면 둘 다 dimension 으로 연결되는데 SizedBox.square 을 사용한다면 기존의 하위 속성은 사라지고 dimension 이 나올 것이다. 그냥 거기에 넣은 값이 가로 세로 다 적용되는 것이다.

SizedBox.square(dimension: 100,)

이렇게 말이다. 이러면 가로 100, 세로 100 짜리 사이즈를 가진 상자가 만들어질 것이다.

 

SizedBox.fromSize({size})

이건 좀 초보자는 많이 사용할 상황이 나오지 않을지도 모른다. SizedBox 가 차지할 사이즈를 외부에서 전달받을 수 있게 해 준다.

이게 무슨 말이냐? 코드를 뜯어보면 안다.

/// Creates a box with the specified size.
SizedBox.fromSize({super.key, super.child, Size? size})
  : width = size?.width,
    height = size?.height;

아까 square 이랑 비슷하다고 느낄 수 있다. 하지만 다르다. 이건 말 그대로 size 라는 가로, 세로 크기 그 자체인 위젯을 가져오고 width = size?.width 이렇게 해서 그 size 위젯의 가로 크기를 가져오고 있는 것을 알 수 있다. 이는 SizedBox 의 크기가 동적일 때 사용될 것이다. 예제를 보면

Size myBoxSize = Size(100, 50);

Widget build(BuildContext context) {
  return SizedBox.fromSize(
    size: myBoxSize,
    child: Container(color: Colors.blue),
  );
}

이렇게 SizedBox 의 크기를 내부 하위 속성에서 정해주는 게 아니라 외부 변수에서 정해준다음에 그걸 받아서 그 사이즈를 차지하게 되는 모습이다. 근데 사실 기본 SizedBox 의 width 와 height 에서도 동일한 작업을 수행할 수 있지만 코드가 안 예뻐지니까 만들어놓은 것 같다.

 

암튼 이렇게 SizedBox 에 대해서 알아보았다. 가장 많이 쓰이는 위젯답게 이해는 기본이요 사용법도 확실하게 알고 있어야 하는 위젯이라고 할 수 있겠다. 그럼 도움이 되었길 바라며 마치겠다.