[Flutter] 위젯이 차지하는 크기 알아보기 (LayoutBuilder)

🎁 LayoutBuilder

빌드 방식을 사용하면서 위젯을 완성하기 전에 위젯의 크기를 확인할 수 있는 위젯이다.

builder 의 constraint.maxHeight 와 constraint.maxWidth 변수로 위젯의 너비와 높이를 알 수 있다.

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraint){
    // LayoutBuilder 가 차지하고 있는 높이
    constraint.maxHeight;
    // LayoutBuilder 가 차지하고 있는 너비
    constraint.maxWidth;
    return Container();
  }
)

 

 

예시 😶) 가로 스크롤의 ListView 에서 한 아이템이 한 스크롤 화면 당 3개의 항목을 보여주고 싶을 때 LayoutBuilder 를 사용하여 가져온 위젯 전체의 너비값으로 한 항목 당 너비를 3/1 하면 가능하다.

 

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "layoutBuilder",
      home: Scaffold(
        appBar: AppBar(title: const Text("layoutBuilder")),
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(16.0),
      width: MediaQuery.of(context).size.width,
      height: 200,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.green),
        borderRadius: const BorderRadius.all(Radius.circular(16.0)),
        color: Colors.white,
      ),
      child: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraint){
          final physics = PageScrollPhysics(parent: BouncingScrollPhysics());
          return Container(
            child: ListView.builder(
              itemCount: 9,
              physics: physics,
              scrollDirection: Axis.horizontal,
              itemBuilder: (BuildContext context, int index) {
                return MyContainer(width: constraint.maxWidth / 3, index: index);
              },
            ),
          );
        },
      ),
    );
  }
}

class MyContainer extends StatelessWidget {
  final double width;
  final int index;
  const MyContainer({Key? key, required this.width, required this.index}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("$index번째"),
          const SizedBox(height: 10.0),
          Container(width: 50, height: 50, color: Colors.deepOrangeAccent),
        ],
      ),
    );
  }
}

 

 

 

LayoutBuilder class - widgets library - Dart API