[Flutter] LayoutBuilder를 사용하여 위젯의 크기 구하기

개요

Flutter에서 앱을 개발할 때, 가끔 위젯의 크기를 알아낼 필요가 발생합니다. 이번 블로그 포스트에서는 LayoutBuilder를 사용하여 위젯의 크기를 구하는 방법에 대해서 알아보도록 하겠습니다.

공식 문서: LayoutBuilder

이 블로그 포스트에서 소개하는 소스 코드는 아래에 링크에서 확인할 수 있습니다.

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/widget/layoutbuilder

LayoutBuilder

LayoutBuilder를 사용하면 특정 위젯의 넓이(Width)와 높이(Height)를 구할 수 있습니다.

위젯 크기

특정 위젯의 크기를 구하기 위해서는 다음과 같이 LayoutBuilder 위젯을 해당 위젯의 부모 위젯 또는 자식 위젯으로 사용하면 됩니다.

...
floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  child: LayoutBuilder(builder: (
    BuildContext context,
    BoxConstraints constraints,
  ) {
    print('FloatingActionButton minWidth: ${constraints.minWidth}');
    print('FloatingActionButton maxWidth: ${constraints.maxWidth}');
    print('FloatingActionButton minHeight: ${constraints.minHeight}');
    print('FloatingActionButton maxHeight: ${constraints.maxHeight}');
    return const Icon(Icons.add);
  }),
),
...

이 코드를 실행하면 다음과 같이 위젯의 크기를 확인할 수 있습니다.

flutter: FloatingActionButton minWidth: 0.0
flutter: FloatingActionButton maxWidth: 56.0
flutter: FloatingActionButton minHeight: 0.0
flutter: FloatingActionButton maxHeight: 56.0

body 크기

같은 방법으로 body의 크기를 구할 수 있습니다. LayoutBuilder를 사용하여 body의 크기를 구하는 코드는 다음과 같습니다.

...
body: LayoutBuilder(
  builder: (
    BuildContext context,
    BoxConstraints constraints,
  ) {
    print('body minWidth: ${constraints.minWidth}');
    print('body maxWidth: ${constraints.maxWidth}');
    print('body minHeight: ${constraints.minHeight}');
    print('body maxHeight: ${constraints.maxHeight}');
    return Center(
      ...
    );
  },
),
...

이 코드를 실행하면 다음과 같이 body의 크기를 확인할 수 있습니다.

flutter: body minWidth: 0.0
flutter: body maxWidth: 393.0
flutter: body minHeight: 0.0
flutter: body maxHeight: 737.0

완료

이것으로 LayoutBuilder를 사용하여 특정 위젯의 크기를 구하는 방법에 대해서 알아보았습니다. 특정 위젯의 크기를 구할 필요가 있다면 이 블로그를 참고하여 LayoutBuilder를 사용해 보시기 바랍니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.