📖 LayoutBuilder
- Flutter에서 반응형 UI를 만드는 핵심 위젯이다.
- 이 위젯은 부모 위젯으로부터 전달받은 제약 조건 (
BoxConstraints)을 기반으로 자식 위젯의 레이아웃을 동적으로 구성할 수 있도록 도와준다.
⚙️ 작동 원리
LayoutBuilder는 빌드 시점에 부모의 레이아웃 제약 조건에 접근한다.builder함수를 통해BuildContext,BoxConstraints(minWidth,maxWidth,minHeight,maxHeight) 값을 포함한다.- 개발자는 이 제약 조건을 활용하여 화면 크기나 가용 공간에 맞는 UI를 렌더링 할 수 있다.
// 액자의 크기가 변하면 그 안의 그림도 자동으로 바꿔주는 독특한 액자 return LayoutBuilder( // 부모 위젯의 크기를 기반으로 하기 때문에 Scaffold가 배치되는 곳에서 사용 // builder: 어떻게 내용을 구성할 것인가를 결정하는 함수 // context: 현재 위젯의 위치와 관련된 정보 // constraints: 현재 사용 가능한 공간의 크기 정보 builder: (context, constraints) { // 768 픽셀은 태블릿 크기의 기준점으로 많이 사용 if(constraints.maxWidth >= 768) { // 태블릿용 위젯 리턴 return HomeBodyTablet(); } // 768 체크를 먼저 하고 그걸 통과 못하면 600 체크 if(constraints.maxWidth >= 600) { // 소형 태블릿용 위젯 리턴 return HomeBodyTabletSm(); } // 스마트폰을 가로로 돌렸을 때 if(constraints.maxWidth >= 480) { // 모바일 가로모드용 위젯 리턴 return HomeBodyLandscape(); } // 모바일 세로모드 return HomeBody(); },);}}
🧠 반응형 UI 적용 예시
모바일 vs 태블릿
- 화면 너비 (
constraints.maxWidth)를 기준으로 서로 다른 위젯 구조를 반환하여 기기별 맞춤 레이아웃 구현이 가능하다.
부분 영역 반응형
LayoutBuilder는 부모가 허용한 영역 내에서만 반응한다.- 즉 전체 화면 크기에 의존하는
MediaQuery와 달리Container,card,Column등 특정 위젯 영역의 크기 변화에도 유연하게 대응할 수 있다.- 예를 들어 화면의 절반 크기를 차지하는
Container안의LayoutBuilder는 전체 화면이 아닌 해당Container의 공간 크기를 기준으로 작동한다.
🚀 장점
정확한 반응형 로직
- 부모 위젯의 실제 크기에 따라 레이아웃이 결정된다.
성능 최적화
- 전체 화면 리빌드 없이 필요한 영역만 갱신된다.
유연한 디자인
- 텍스트 크기, 패딩, 위젯 개수, 레이아웃 구조를 자유롭게 변경 가능하다.
적응형 UI 구현
- 다양한 기기 (모바일, 태블릿, 웹)에 대응하는 핵심 도구이다.
⚠️ 주의할 점
builder 함수는 가볍게 유지하기
LayoutBuilder는 제약 조건이 변경될 때마다builder를 다시 호출한다.builder내부에서 무거운 연산을 수행하면 렌더링 성능이 저하될 수 있다.- 복잡한 로직은 별도 함수나 위젯으로 분리하는 것이 좋다.
✨ 결론
LayoutBuilder = 부모 제약 기반의 반응형 빌더
- 화면 크기뿐 아니라 위젯 단위로도 유연하게 대응 가능한 진정한 반응형 도구이다.
- Flutter에서 적응형 • 반응형 레이아웃 설계 시 반드시 알아야 할 핵심 위젯이다.
