Flutter[플러터] / Wrap 을 사용하여 반응형으로 정렬하기 (유동적 레이아웃) Wrap (Flutter Widget of the Week)

LimitedBox class

제약이 없을 때만 크기가 제한되는 상자입니다.

이 위젯의 ​​최대 너비에 제한이 없으면 자식 위젯의 너비는 maxWidth 로 제한됩니다. 마찬가지로, 이 위젯의 ​​최대 높이에 제한이 없으면 자식 위젯의 높이는 maxHeight 로 제한됩니다.

이는 경계가 없는 환경에서 자식 위젯에 자연스러운 차원을 부여하는 효과가 있습니다. 예를 들어, 일반적으로 최대한 크게 보이도록 하는 위젯에 maxHeight를 지정하면 위젯은 일반적으로 부모 위젯에 맞춰 크기가 조정되지만, 세로 목록에 배치되면 지정된 높이를 갖게 됩니다.

이 기능은 일반적으로 부모의 크기에 맞추려는 위젯을 구성할 때 유용하며, 목록(제한 없음)에서 합리적으로 동작하도록 합니다.

https://youtu.be/uVki2CIzBTs

공식 문서 코드

 

---

LimitedBox 는 부모 위젯의 크기가 무한일 때만 자식 위젯에게 크기를 먹여줄 수 있는 위젯이다. 한번 간단하게 알아보자.

하위 속성

속성명	타입	기본값	설명
child	Widget	–	제약이 없는 상황에서 크기가 제한될 자식 위젯
maxWidth	double	double.infinity	부모 위젯이 폭 제약을 주지 않을 때 사용할 최대 너비
maxHeight	double	double.infinity	부모 위젯이 높이 제약을 주지 않을 때 사용할 최대 높이

 

사용법은 간단하다. Column, ListView, SingleChildScrollView 같은 위젯 안에서 사용하게 되는데 이 위젯들의 경우 공통적인 특징이 자식에게 무한한 크기를 준다는 점이다. LimitedBox 는 여기 안에서 사용된다.

SingleChildScrollView(
  child: Column(
    children: [
      Text('Title'),
      LimitedBox( // 여기
        maxHeight: 200,
        child: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
        ),
      ),
    ],
  ),
)

 

이렇게 maxHeight 값을 준 모습이다. 이 LimitedBox 는 이렇게 상위 위젯이 무한한 크기를 가지고 있을 때만 먹인 maxHeight 라든가 maxWidth 가 반영되게 된다. 만약 상위 위젯이 그냥 일반적인 위젯이라면

LimitedBox(
  maxHeight: 100,
  maxWidth: 100,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
),

그냥 LimtedBox 무시되고 200 X 200 을 가져버린다.

 

LimitedBox 위젯에 대해서 알아보았다. 근데 솔직하게 이거 별로 안쓸 것 같은 느낌의 위젯이다. 애초에 스크롤되는 환경 안에서는 크기를 필수로 줘야 할 텐데 왜 max 값이 필요한 것일까..? 나의 견문이 아직 짧아 잘 모르는 것 같다. 암튼 도움이 되었길 바라며 마치겠다.