LayoutBuilder class
부모 위젯의 크기에 따라 달라지는 위젯 트리를 빌드합니다.
Builder 위젯과 유사하지만, 프레임워크가 레이아웃 시점에 빌더 함수를 호출하고 부모 위젯의 제약 조건을 제공한다는 점이 다릅니다. 이는 부모 위젯이 자식 위젯의 크기를 제한하고 자식 위젯의 기본 크기에 의존하지 않을 때 유용합니다. LayoutBuilder 의 최종 크기는 자식 위젯의 크기와 일치합니다.
빌더 함수는 다음과 같은 상황에서 호출됩니다.
- 위젯이 처음 배치되는 시점입니다.
- 부모 위젯이 다른 레이아웃 제약 조건을 전달하는 경우.
- 부모 위젯이 이 위젯을 업데이트할 때.
- 빌더 함수가 구독하는 종속성이 변경되는 경우.
부모가 동일한 제약 조건을 반복적으로 전달하는 경우 레이아웃 중에 빌더 함수가 호출되지 않습니다.
자식 뷰가 부모 뷰보다 작아야 하는 경우, Align 위젯으로 감싸는 것을 고려해 보세요. 자식 뷰가 더 커야 하는 경우, SingleChildScrollView 또는 OverflowBox 위젯으로 감싸는 것을 고려해 보세요.
공식 문서 코드
LayoutBuilder 는 반응형 UI 제작에 첫걸음이라고 할 수 있는 위젯인데 부모 위젯의 제약 조건(BoxConstraints)을 기반으로 자식 위젯을 동적으로 구성할 수 있도록 도와주는 위젯이다. 한번 쉽게 알아보자. (좋은 기능을 가지고 있는 반면에 엄청나게 간단한 사용법과 그에 따른 46초라는 레전드 영상 길이를 보여주는 위젯이다.)
builder: (context, constraints) {사용법은 간단하다. 빌더의 파라미터 안에 있는 constraints 를 사용해주면 된다. 이 친구가 바로 이 위젯의 핵심이다.
constraints 의 하위 속성은 이렇게 되는데
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| minWidth | double | 0.0 | 허용되는 최소 너비 |
| maxWidth | double | double.infinity | 허용되는 최대 너비 |
| minHeight | double | 0.0 | 허용되는 최소 높이 |
| maxHeight | double | double.infinity | 허용되는 최대 높이 |
우리는 이제 이걸 사용하여 크기 제약을 걸수도 있고 크기에 따라 반응하는 위젯을 만들 수 도 있는 것이다.
코드 예제에 나와있는 것처럼 사용해주면 되는데 굉장히 사용하기 쉽다.
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
return _buildWideContainers();
} else {
return _buildNormalContainer();
}
},
);
현재 화면의 가로 길이를 if문으로 걸러서 크기에 맞게 화면에 표시될 위젯을 변경해주는 식으로 사용하면 된다. 정말로 이게 끝이다.
그렇다면 이런 의문이 들 수 있다. "이거 MediaQuery.sizeOf(context) 랑 똑같은거 아니야? 그거 쓰면 안돼?" 라고 반은 맞고 반은 틀리다. 정확히는 자신이 LayoutBuilder 를 사용하는 위치에 따라 다른데 위의 속성표에 기본값을 보면 나와있지만 인피니티, 즉 자신이 차지할 수 있는 만큼 차지한다고 나와있다. 이 말은 즉슨 constraints 은 상위 위젯의 크기가 곧 maxWidth 인 것이다. 상위 위젯이 없다면 화면의 크기가 maxWidth 인 것이고.
이렇게 LayoutBuilder 를 알아보았다. 솔직히 double.infinity 라든가 MediaQuery.sizeOf(context) 라든가 좋은게 많지만 그럼에도 이런 빌더가 있는 이유는 사용하기 더 편하고 가독성도 좋고 암튼 좋기 때문이다. 도움이 되었길 바라며 마치겠다.
