IntrinsicWidth, UnconstrainedBox

flutter로 ui를 그리는 중 아래와 같이 그려야 하는 상황이 발생하였다.

 

왼쪽 끝은 container 리스트, 오른쪽 끝은 하나의 아이콘으로 정렬되는 위젯이다.

  Widget _box(){
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4),
        border: Border.all(color: Colors.black)
      ),
      padding: const EdgeInsets.all(8),
      child: Row(
        children: const [
          Text('테스트'),
          Icon(Icons.close),
        ],
      ),
    );
  }

  Widget _row(){
    return Row(
      children: [
        ...List.generate(3, (index) => _box()),
        Spacer(),
        Icon(Icons.filter_alt_outlined),
      ],
    );
  }

처음엔 Row위젯을 이용하여 그렸는데 리스트 개수가 늘어나면 Overflow가 발생하였다. 그래서 Wrap 위젯을 이용하여 overflow 시 다음 줄로 넘어가도록 시도하였다.

 

  Widget _row(){
    return Row(
      children: [
        Expanded(
          child: Wrap(
            children: List.generate(10, (index) => _box()),
          ),
        ),
        Icon(Icons.filter_alt_outlined),
      ],
    );
  }

 

Row 위젯 안에서 오른쪽 끝은 Icon이 왼쪽 나머지 영역은 Wrap 영역으로 하고 싶어서 Wrap을 Expanded하였다. (Row 안에서 Wrap 위젯 사용 시 똑같이 overflow 발생함) _box위젯의 크기가 wrap content가 아닌 match parent가 되어 한 줄에 하나의 _box 위젯이 영역을 다차지 하는 현상이 발생

 

부모의 크기로 따라 가는 것이 아닌 자식의 크기로 고정시켜주는 Widget을 찾던 도중 IntrinsicWidth 위젯을 발견

  Widget _box(){
    return IntrinsicWidth(
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(4),
          border: Border.all(color: Colors.black)
        ),
        padding: const EdgeInsets.all(8),
        child: Row(
          children: const [
            Text('테스트'),
            Icon(Icons.close),
          ],
        ),
      ),
    );
  }

 

하지만 공식문서를 보면 가능한 사용하지 말라고 안내되어있다.

https://api.flutter.dev/flutter/widgets/IntrinsicWidth-class.html

IntrinsicWidth class - widgets library - Dart API

This class is relatively expensive, because it adds a speculative layout pass before the final layout phase. Avoid using it where possible. In the worst case, this widget can result in a layout that is O(N²) in the depth of the tree.

 

다른 대안을 찾는 중 UnconstrainedBox를 발견

https://api.flutter.dev/flutter/widgets/UnconstrainedBox-class.html

UnconstrainedBox class - widgets library - Dart API

ConstrainedBox는 제약을 지정하지만 UnconstrainedBox는 제약을 지정하지 않고 자연스러운 크기로 렌더링할 수 있는 위젯이다. 그래서 child widget이 원하는 만큼의 크기를 가진다. 크기가 너무 크면 overflow 발생한다.

 

  Widget _box(){
    return UnconstrainedBox(
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(4),
          border: Border.all(color: Colors.black)
        ),
        padding: const EdgeInsets.all(8),
        child: Row(
          children: const [
            Text('테스트'),
            Icon(Icons.close),
          ],
        ),
      ),
    );
  }