LayoutBuilder 중단점

Coddy Flutter 여정의 화면 크기에 맞는 레이아웃 섹션에 포함된 레슨. 30개 중 17번째.

태블릿에서는 메일 앱의 메뉴가 메시지 옆에 표시됩니다. 휴대전화에서는 공간이 부족하므로 메뉴가 위에 표시됩니다. 레이아웃이 바뀌는 너비를 중단점이라고 합니다.

LayoutBuilder는 위젯에 공간이 얼마나 있는지 알려 주며, 크기마다 다른 것을 만들 수 있게 해 줍니다.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return Column(children: [menu, content]); // 휴대폰
    }
    return Row(children: [menu, content]); // 태블릿
  },
)

builder는 Flutter가 위젯에 주어진 공간을 constraints로 전달하며 호출하는 함수입니다. constraints.maxWidth는 결과가 가질 수 있는 최대 너비입니다. 600픽셀보다 작으면 Column을 반환하고, 그렇지 않으면 Row를 반환합니다. 너비가 390픽셀인 휴대전화에서는 열이 표시되고, 너비가 1000픽셀인 태블릿에서는 행이 표시됩니다.

MediaQuery는 화면 전체를 읽습니다. LayoutBuilder는 위젯 하나의 공간을 읽으므로, 해당 위젯이 더 큰 페이지 안의 패널이어도 여전히 작동합니다.

챌린지

중급

메뉴와 콘텐츠는 항상 나란히 배치되어 있어 휴대폰에서는 비좁습니다. 600픽셀을 기준점으로 LayoutBuilder를 사용하세요:

600보다 좁을 때: 메뉴를 콘텐츠 위에 Column으로 배치
600 이상일 때: 지금처럼 Row로 나란히 배치

직접 해보기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Mail')),
        body: Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.teal.shade100,
                child: const Center(child: Text('Menu')),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.white,
                child: const Center(child: Text('Content')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}