[Flutter] Widget(5) - LayoutBuild

LayoutBuilder Widget

• LayoutBuilder 위젯은 부모 위젯의 크기에 따라 달라지는 위젯 트리를 작성한다. 즉, 위젯의 크기에 따라 자식요소를 build를 하겠다는 의미이다. 
• framework가 layout 타임에 빌더 함수를 호출하며 부모 위젯의 제약 조건을 제공한다는 점을 제외하고는 Builder 위젯과 유사하다.
• 이 위젯은 부모 위젯이 자식의 크기를 결정하고, 자식 위젯의 고유 크기에 의존하지 않을 때 유용하다.
• 이 위젯의 최종 크기는 자식의 크기와 일치하다.

LayoutBuilder Widget이 호출되는 경우

 

• 위젯이 처음으로 배치 되는 경우
• 상위 위젯이 해당 위젯을 업데이트 하는 경우
• builder 함수가 구독하는 종속성의 변경이 있는 경우
  
  

 

LayoutBuilder 예제 코드

• 너비 제약 조건에 따라 다른 위젯을 빌드하는 경우

import 'package:flutter/material.dart';

/// Flutter code sample for [LayoutBuilder].

void main() => runApp(const LayoutBuilderExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: LayoutBuilderExample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('LayoutBuilder Example')),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth > 600) {
            return _buildWideContainers();
          } else {
            return _buildNormalContainer();
          }
        },
      ),
    );
  }

  Widget _buildNormalContainer() {
    return Center(
      child: Container(
        height: 100.0,
        width: 100.0,
        color: Colors.red,
      ),
    );
  }

  Widget _buildWideContainers() {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Container(
            height: 100.0,
            width: 100.0,
            color: Colors.red,
          ),
          Container(
            height: 100.0,
            width: 100.0,
            color: Colors.yellow,
          ),
        ],
      ),
    );
  }
}

 

위 코드에서 builder 함수 호출 부분을 보면 context와 constraints를 인자로 받아오는 것을 볼 수 있다.

builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth > 600) {
            return _buildWideContainers();
          } else {
            return _buildNormalContainer();
          }
        },

 

여기서 constraints를 통해 현재 LayoutBuilder를 부모로 가지는 위젯의 width와 height 등 constraints 요소의 크기를 확인할 수 있다.

 

• 실행화면

 

이렇게 위젯의 constraints를 활용할 수 있다는 점을 이용하여 반응형 앱을 만들 때, MediaQuery와 함께 사용하여 유용하게 사용이 가능하다.