[019] 플러터 (Flutter) Tip - IntrinsicWidth 활용하여 컨테이너 크기 반응형으로 만들기

안녕하세요~ totally 개발자입니다.

 

컨테이너 안에 텍스트를 넣는 경우 가로 길이를 원하는대로, 반응형으로 하기 원하시는 분들이 있으실 겁니다.

 

보통 아래와 같이 일반적으로 컨테이너 위젯 안에 단일 텍스트 위젯 구성으로 되어 있으면 자동으로 이것이 가능하지만

Container(
  child: Text("HELLO WORLD"),
),

 

Row 위젯 등 여러 위젯들과 같이 복합적으로 사용될 때에는 IntrinsicWidth 같은 위젯 사용이 필요합니다.

예를 들어, 2개의 텍스트가 있는 박스가 Row 위젯 안에 들어있다고 가정합니다. 코드는 아래와 같습니다. 

Row(
  children: [
    Expanded(
        child: Container(color: Colors.blue, child: Text("TEXT1"))),
    Expanded(
      child: Container(
        color: Colors.red,
        child: Text("TEXT2"),
      ),
    ),
  ],
),

 

 

Expanded 위젯을 사용하기 때문에 TEXT1의 범위가 절반을 넘지 않았는데도 Row의 길이에 맞춰서 최대한 늘려주는 것을 알 수 있습니다. 여기에서 TEXT1 파란 컨테이너 박스의 범위를 절반을 유지하면서 TEXT1의 범위 만큼만 파란색 컨테이너 박스를 조정하려면 어떻게 해야 할까요? 바로 Expanded를 빼고, Container의 constraints 속성과 IntrinsicWidth 위젯을 같이 사용해주면 됩니다.

 

Row(
  children: [
    Container(
      constraints: BoxConstraints(
        maxWidth: MediaQuery.of(context).size.width * 0.5,
      ),
      child: IntrinsicWidth(
        child:
            Container(color: Colors.blue, child: Text("TEXT1")),
      )
    ),
    Expanded(
      child: Container(
        color: Colors.red,
        child: Text("TEXT2"),
      ),
    ),
  ],
),

 

이렇게 되면 아래와 같은 결과가 나오고 아래처럼 더 많은 텍스트를 늘려도 최대 길이가 화면 가로 길이의 절반이니 그것을 초과해도 알아서 반응형으로 적용됩니다.

 

 

여러 위젯들이 같이 혼재되어 있을 때 사용할 수 있는 좋은 방법들 중 하나로 개발하실 때 유용하게 사용할 수 있을 것으로 생각됩니다.

 

감사합니다.