[Flutter]LayoutBuilder

들어가며

Flutter는 크로스플랫폼 앱개발 프레임워크입니다. 그렇다보니 아무래도 웹과 모바일앱을 동시에 제작하는 일도 많고, 특히나 웹에 경우 화면 사이즈에 따라서 각기 다른 화면처리가 필요합니다. 이를 반응형 웹이라고 하죠. LayoutBuilder는 이러한 화면처리를 도와줍니다.

LayoutBuilder

어떠한 웹사이트를 제작하는 중이라고 하겠습니다. 웹사이트는 사용자의 기기에 따라서 크기도 다르고, 전체화면이 아니라면 더 다양한 사이즈로 사용자에게 보여지게 됩니다. 그럴때마다 각기 다른 화면으로 전환될 수 있도록 반응형으로 제작하는 것이 좋은데, LayoutBuilder를 이용해서 그런 상황을 보여드리겠습니다.

이처럼 화면의 사이즈에 따라 다른 화면을 보여줄 수 있습니다.

환경 구성

각 상황에 따른 화면들이 필요합니다. 각 화면은 이름하고 색상만 다를뿐 아래와 동일합니다. 3개의 화면을 생성합니다.

import 'package:flutter/material.dart';

class OnePage extends StatelessWidget {
  const OnePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
    );
  }
}

이제는 LayoutBuilder를 통해서 해당 화면들을 각각의 상황에 맞게 보여주면 됩니다. responsible_view.dart파일을 생성합니다. 이 파일은 화면의 크기에 따른 다른 뷰를 전달해주는 역활입니다.

import ...

class ResponsibleView extends StatelessWidget {
  const ResponsibleView({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      if (constraints.maxWidth > 1000) {
        return OnePage();
      } else if (constraints.maxWidth > 600) {
        return TwoPage();
      } else {
        return ThreePage();
      }
    });
  }
}

LayoutBuilder는 context와 constraints를 전달받아요. 여기서 constraints는 위젯의 최대, 최소의 너비, 그리고 최대, 최소의 높이에 대한 정보라고 생각하면 됩니다. 따라서, constraints를 통해서 최대 너비에 접근할 수 있고, 그 너비에 따른 화면을 조건문을 이용해서 반환할 수 있습니다. 이렇게 아래와 같은 반응형 화면을 만들 수 있는것입니다.