Flutter에서 VerticalDivider 올바르게 사용하기

Flutter에서 VerticalDivider를 사용할 때 흔히 겪는 문제 중 하나는 구분선이 보이지 않는 현상입니다. 이를 해결하는 방법을 알아보겠습니다.

 

 

문제점

VerticalDivider는 단독으로 사용하면 높이가 지정되지 않아 화면에 표시되지 않습니다.

Row(
  children: [
    Text('텍스트1'),
    VerticalDivider(  // 보이지 않음!
      color: Colors.grey,
      width: 1,
    ),
    Text('텍스트2'),
  ],
)

 

 

해결방법 1: IntrinsicHeight 사용

IntrinsicHeight 위젯으로 감싸서 자식 위젯들의 높이를 자동으로 계산하도록 합니다.

IntrinsicHeight(
  child: Row(
    children: [
      Text('텍스트1'),
      VerticalDivider(
        color: Colors.grey,
        width: 20,      // 구분선의 좌우 여백 포함 전체 폭
        thickness: 1,   // 실제 구분선 두께
      ),
      Text('텍스트2'),
    ],
  ),
)

 

 

 

해결방법 2: Container로 높이 지정

Container를 사용하여 명시적으로 높이를 지정합니다.

Container(
  height: 24,  // 원하는 높이 지정
  child: Row(
    children: [
      Text('텍스트1'),
      VerticalDivider(
        color: Colors.grey,
        width: 20,
        thickness: 1,
      ),
      Text('텍스트2'),
    ],
  ),
)

 

 

 

해결방법 3: 간단한 대안. Text 위젯 사용

간단히 텍스트 사이에 구분선을 넣고 싶다면, | 문자를 사용하는 것도 좋은 방법입니다.

Row(
  children: [
    Text('텍스트1'),
    Text(' | ', style: TextStyle(color: Colors.grey)),
    Text('텍스트2'),
  ],
)

 

 

VerticalDivider 속성

- width: 구분선의 좌우 여백을 포함한 전체 폭

- thickness: 실제 구분선의 두께

- color: 구분선의 색상

- indent: 위쪽 여백

- endIndent: 아래쪽 여백

 

 

주의사항

VerticalDivider는 반드시 Row 또는 Flex 위젯 내에서 사용해야 합니다.

높이가 지정되지 않으면 보이지 않을 수 있으므로, IntrinsicHeight나 Container로 높이를 설정해주세요.

단순한 구분선이 필요한 경우 Text 위젯으로 | 문자를 사용하는 것이 더 간단할 수 있습니다.