ConstrainedBox class
자식 위젯에 추가적인 제약을 부과하는 위젯입니다.
예를 들어, 자식의 최소 높이를 50.0 논리 픽셀로 지정하려면 제약 조건 const BoxConstraints(minHeight: 50.0) 으로 다음을 사용할 수 있습니다.
예시 코드
앱을 구성할 때 오는 데이터가 얼마나 오는지 혹은 위젯을 배치할 건데 그 위젯의 크기를 예측 불가능 할 때 어떻게 해야 할까? 이런 상황에서는 레이아웃이 깨질 가능성이 생기는데 이럴 때 안전하게 크기를 제한하는 용도로 사용되는 것이 ConstrainedBox 위젯이다.
ConstrainedBox 위젯은 자식 위젯에 제약 조건(BoxConstraints)을 적용하기 위해 사용하는 위젯이다.
이 위젯은 부모 위젯이 제시한 제약 조건과 자식 위젯이 원하는 크기 사이에서 중간 관리자 역할을 하며 자식 위젯이 무한히 커지거나 너무 작아지는 것을 방지할 수 있게 한다. 바로 한번 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| child | Widget? | – | 제약을 적용할 자식 위젯 |
| constraints | BoxConstraints | (필수) | 자식에게 부여할 추가적인 크기 제약 조건 |
하위 속성을 보면 알겠지만 진짜 딱 constaints 하나만을 위해 존재하는 위젯이다. constraints 는 BoxConstraints 를 타입으로 가지게 되는데 BoxConstraints 안에서는 위의 예제처럼 직접 크기를 지정해 줄 수도 있고 생성자를 사용하여 BoxConstraints.expand() 이런 식으로 크기를 그냥 다 차지하게 만들어 줄 수도 있다.
constraints: BoxConstraints(
minWidth: 100,
minHeight: 100,
maxWidth: 200,
maxHeight: 200,
),자 이 코드에서 바로 한번 살펴보자.
현재 너비와 높이의 최소 값은 minWidth, minHeight 로 100씩 먹여주고 있다. 이렇게 되면 BoxConstraints 의 자식은 무조건적으로 최소 크기 100을 갖게 된다는 소리이다. 그렇다면 이제 당연하게도 최댓값, 최대 크기도 maxWidth, maxHeight 로 200 씩 먹여주고 있는데 이러면 자식이 아무리 커봤자 최대 크기를 200 을 가지게 된다는 것이다.
위 예제에서 자식은 이런 모습을 하고 있는데
child: Container(
width: 300, // 무시됨 => maxWidth 200까지만 적용됨
height: 50, // minHeight 100 적용되어 100이 됨
color: Colors.blue,
),
이렇게 주석을 달아 놓은 것처럼 자식 위젯인 Container 는 기본적으로 width 를 300을 갖는다고 하지만 maxWidth 로 200을 먹여 놨기 때문에 강제적으로 Container 의 width는 200이 되게 된다.
마찬가지로 height 도 현재 50을 먹여주고 있지만 내가 최소 높이를 100으로 잡아 놨기에 Container 의 height 는 100을 가지게 된다.
자, 여기까지가 이제 기본적인 사용방법이고 조금 더 사용할 곳은 알아보자면..
대표적으로 ListView 같은 거 배치할 때 사용할 수 있을 것이다.
ListView(
children: [
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 200),
child: Text('많은 텍스트...'),
),
],
)Column 또는 ListView 내부에 있는 위젯이 무제한으로 확장하려 할 때에 maxHeight 로 제한해줄 수 있겠다.
이렇게 되면 텍스트가 아무리 많아져도 최대 높이가 200으로 제한이 되기 때문에 안전하게 사용할 수 있다.
그리고 이 위젯의 존재 의미는 max 보다는 min 에 있다고 볼 수 있는데 아래 코드를 봐보면
ConstrainedBox(
constraints: BoxConstraints(minHeight: 100),
child: Text('적은 텍스트...'),
),
이렇게 minHeight 로 강제하여 적은 텍스트, 즉 작은 크기를 갖고 있더라도 기본적으로 높이 100을 갖고 있게 할 수 있다는 말이다. 이게 굉장히 좋은 이유가 보통 앱에서 위젯을 배치할 때 세로로 배치하게 되는데 데이터를 받아올 경우 특히나 공공 API, 그 데이터가 얼마나 긴지, 얼마나 짧은지 알 수 없게 된다.
만약 데이터가 오류가 나서(String 으로 온다고 가정했을 때) 빈 텍스트("")가 와버려서 크기를 갖지 않는 상황이 발생한다면 내가 차곡차곡 쌓아놓은 위젯의 배치가 망가질 수 있다. 이럴 때에 최소 높이를 잡아 높으면 데이터가 오지 않더라도 기본적인 크기는 잡아줄 수 있고 만약 데이터가 많아지게 된다면 그에 맞게 크기가 늘어나므로 유동적으로 위젯을 배치할 수 있게 된다.
이렇게 ConstrainedBox 위젯에 대해서 알아보았다. 솔직히 max- 속성 쓸 거면 이거 쓸빠에 SizedBox 쓰는 게 훨씬 빠르고 간단하지 않나 싶긴 하다만 min- 때문에 사용할 여지는 있어 보인다. 도움이 되었길 바라며 마치겠다.
