[플러터 2.0] LayoutBuilder (반응형 레이아웃 만들기)

 

이전 글에서는 MediaQuery를 이용해서 기기의 화면 크기를 알아보는 법을 배웠습니다

하지만 기기의 전체 화면이 아니라 위젯의 크기를 알고싶을때는 어떻게 해야 할까요?

물론 MediaQuery를 쓰고, 각 위젯의 height, widght를 구해서 빼줘서 어쩠지해서 구할 수는 있지만

이 모든 것을 한방에 쉽게 해결하는 것이 LayoutBuilder 위젯입니다.

 

구글 공신 문서에서는 Builds a widget tree that can depend on the parent widget's size. 라고 소개하고 있습니다. 말 그대로 위젯의 크기에 따라 build를 하겠다는 뜻입니다.

 

LayoutBuilder의 builder function은 layout타임에 불리게 되고, constraints이 제공됩니다.

builder: (BuildContext context, BoxConstraints constraints) {
        final width = constraints.maxWidth;
        final height = constraints.maxHeight;
        final ratio = width / height;
        .
        .
        .

builder function은

• 처음으로 widget이 layout 될 때
• 부모 widget의 constraint가 바뀔 때
• 부모 widget이 해당 widget을 업데이트할 때

불리게 됩니다

 

이해를 돕고자 예시를 가져와봤습니다

 

 

 

부모 widget이 같은 값의 constraint를 계속 넘겨주게 되는 상황에서는 builder function이 불리지 않습니다

LayoutBuilder는 MediaQuery와 함께 아래의 예시처럼 reponsive 하게 화면을 구성하고 싶을 때 사용됩니다

MediaQuery 위젯에 대해서 알고 싶으면 여기로 가주세요

참고 자료

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