Flutter LayoutBuilder 문서

Web App을 개발하면서 LayoutBuilder를 사용해 화면 크기에 따라 Mobile, Tablet, Desktop 용으로 화면을 보여줄 수 있도록 개발을 진행하였다. 이 글에서 LayoutBuilder에 기본적인 코드와 다양하게 활용해볼 예정이다.

 

코드

LayoutBuilder 필수 프로퍼티는 builder 하나뿐이다. builder 파라미터에 context와 사이즈를 나타내는 constraints 가 사용된다.

constraints 멤버 변수에는 maxWidth, maxHeight, minWidth, minHeight 가 있다. 4가지의 변수를 활용해서 자신의 프로젝트에 맞게 개발하면 된다.

Web으로 빌드해서 테스트해보는 것이 가장 편하다.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('LayoutBuilder Demo'),
    ),
    body: LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 768) {
          return TabletScreen();
        } else {
          return MobileScreen();
        }
      },
    ),
  );
}

왼쪽 Mobile, 오른쪽 Tablet

---

Web App을 개발할 것이 아니라면 디바이스에서 최초로 한 번만 실행하면 화면의 최대 Width, Height는 변할 일이 없을 것이다.

그리고 어떤 상황에서 rebuild 되고 initState, didChangeDependencies가 호출되는지는 확인해보는 것이 좋을 것 같다.

 

rebuild의 경우 화면의 크기가 변함에 따라 rebuild가 진행된다. Web의 경우 화면 창 크기를 조절할 때마다 LayoutBuilder가 호출되어 rebuild가 진행되며 디바이스 같은 경우는 rebuild 될 상황이 거의 없을 것이다.

 

Case 1

태블릿 스크린을 아래와 같이 수정하고 Web으로 화면의 크기를 조절해서 상태 관리가 어떻게 되는지 확인해볼 것이다.

화면의 최초 크기는 Tablet으로 하고 화면 크기 조정도 Tablet 범위 내에서만 진행

class _TabletScreenState extends State<TabletScreen> {
  @override
  void initState() {
    super.initState();
    print('Tablet initState()');
  }
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('Tablet didChangeDependencies()');
  }
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Tablet Screen'),
          Text('maxWidth : ${MediaQuery.of(context).size.width}'),
          Text('maxHeight : ${MediaQuery.of(context).size.height}')
        ],
      ),
    );
  }
}

Case 1 결과

최초 실행 시 maxWidth가 768 이상 일 때 initState -> didChangeDependencies -> build 가 실행되는 것을 실제로 확인할 수 있다.

이후 태블릿 범위 내에서 화면 크기를 조절했을 때 initState는 호출되지 않고 didChangeDependencies -> build 식으로 실행되는 것을 확인할 수 있다.

---

Case 2

태블릿 스크린 -> 모바일 스크린, 모바일 스크린 -> 태블릿 스크린으로 변할 때 상태변화를 알아볼 것이다.

모바일 스크린도 태블릿 스크린처럼 print 코드를 추가해준다.

Case 2 결과

LayoutBuilder에서 maxWidth 크기에 따라 반환되는 스크린이 달라질 경우 반환되는 스크린을 새로 불러오게 된다.