37.[Flutter] LayoutBuilder 로 위젯 크기 가져오기 (vs MediaQuery)

LayoutBuilder

LayoutBuilder는 부모 위젯의 제약 조건(constraints)을 사용하여 자식 위젯의 크기와 위치를 조절하는데 사용됩니다. 이 위젯은 주로 부모 위젯이 자식 위젯에 대한 크기나 제약 조건을 지정하는 경우에 유용합니다. LayoutBuilder의 자식 위젯은 BuildContext와 BoxConstraints를 매개변수로 받아 해당 제약 조건 내에서 레이아웃을 조정할 수 있습니다.

LayoutBuilder 와 MediaQuery 비교

MediaQuery는 디바이스의 화면 크기와 특성을 얻는데 사용됩니다. 이는 앱의 반응형 디자인 및 다양한 화면 크기에 대응하는데 유용합니다. MediaQuery를 사용하면 디바이스의 화면 크기, 화면 밀도, 방향 등과 같은 정보를 얻을 수 있습니다. 이 정보를 기반으로 앱의 레이아웃 및 스타일을 조정할 수 있습니다.
따라서, LayoutBuilder는 위젯의 크기를 가져오고, MediaQuery는 단말기의 화면 크기를 가져오기 때문에 목적에 맞게 사용되어야합니다.

 

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

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => Container(
          color: Colors.teal,
          width: constraints.maxWidth,
          height: constraints.maxHeight,
          child: Center(
            child: Text(
              "${constraints.maxWidth} /// ${size.width}",
              style: TextStyle(fontSize: constraints.maxWidth > 700 ? 70 : 30),
            ),
          ),
        ),
      ),
    );
  }
}

 

constraints.maxWidth 으로 위젯의 너비를 가져옵니다.
constraints.maxHeight 으로 위젯의 높이를 가져옵니다.