Flutter[플러터] / Divider 를 사용하여 구분선 추가하기 (수평선, 디바이더, 섹션, 가로, 세로, VerticalDivider, 호리존탈, 버티컬) Divider (Flutter Widget of the Week)

Divider class

양쪽에 패딩이 있는 얇은 수평선입니다.

머티리얼 디자인 언어에서 이는 구분선을 나타냅니다. 구분선은 목록, Drawer 등에서 콘텐츠를 구분하는 데 사용할 수 있습니다.

ListTile 항목 사이에 구분선을 만들려면 이 경우에 최적화된 ListTile.divideTiles를 사용하는 것이 좋습니다.

https://youtu.be/_liUC641Nmk

공식 문서 코드

 

 

---

앱을 제작하다 보면 직면하게 되는 문제가 있는데 바로 위젯과 위젯 사이에 공간을 어떻게 할지이다. 이러한 두 위젯 사이에 공간이 필요할 때 중간에 줄을 넣어주면 굉장히 도움이 되는데 그럴 땐 Divider 위젯을 사용하면 쉽게  수평선(horizontal line) 형태의 구분선을 추가해 줄 수 있다.

이 Divider 위젯은 수평 선을 화면에 그릴 때 사용하는 기본 위젯이다. 일반적으로 리스트 항목 사이에 구분선을 넣거나 섹션을 시각적으로 나눌 때 사용된다. 바로 알아보자.

하위 속성

속성명	타입	기본값	설명
height	double?	16.0	Divider의 전체 높이
thickness	double?	0.0	선의 두께
indent	double?	0.0	시작 지점의 여백
endIndent	double?	0.0	끝 지점의 여백
color	Color?	Theme에 따름	Divider 선의 색상

먼저 들어가기 전에 사용하는 상황을 한번 봐보자.

Column(
  children: [
    RedBox(),
    BlueBox(),
  ],
)

이렇게 두 개의 상자 위젯이 있는데 누가 봐도 지금 사이에 공간이 필요해 보일 것이다.

이럴 때 보통 SizedBox 같은 위젯으로 공간을 띄우게 된다.

Column(
  children: [
    RedBox(),
    SizedBox(height: 10,),
    BlueBox(),
  ],
)

뭐 나쁘진 않다. 하지만 원하는 것은 이것이 아닐 것이다. 여기서 Divider 위젯을 사용하면 간단하지만 완벽하게 두 위젯을 분리시켜 줄 수 있다.

Column(
  children: [
    RedBox(),
    Divider(), // 사용!
    BlueBox(),
  ],
)

이렇게 두 위젯이 분리가 되었다. 근데 이게 원하던 형태가 아닐 수 있다. 그럴 때에는 Divider의 파라미터를 사용하여 원하는 형태로 만들어주면 되겠다. 먼저 height 속성을 조정하여 사이 공간의 크기를 변경할 수 있다.

Divider(
  height: 50,
)

또한 thickness속성을 사용하여 두께 조절도 가능하고 color속성을 사용하여 색상도 설정 가능하다.

Divider(
  thickness: 5,
  color: Colors.purple,
)

또한 Divider의 양 옆 공간을 띄우고 싶다면 패딩을 직접 먹이는 대신 indent를 이용해 앞 공간을, endIndent를 이용해 뒷 공간에 크기를 먹여줄 수도 있다.

indent: 15,	endIndent: 15

근데 이렇게 원하는 형태로 맞춘 디바이더를 사용하게 된다면 Divider 위젯을 사용하는 곳마다 코드를 또 적어줘야 하는데 엄청나게 비효율적이지 않은가 그래서 일괄적인 형태를 유지하고 싶다면 MaterialApp을 DividerThemeData위젯으로 감싸는 것도 좋다.

단 DividerThemeData는 Divider 위젯과 다른 점이 하나 있는데 바로 height 속성이 아닌 space 속성을 가지고 있다는 것이다.(동작은 동일함)

MaterialApp(
  theme: ThemeData(
    dividerTheme: DividerThemeData(
      space: 25,
      thickness: 3,
      color: Colors.purple,
      indent: 5,
      endIndent: 5
    )
  ),
  //...
)

이렇게 하면 Divider 내에서 아무런 설정을 하지 않아도 전체 코드에 반영되게 되어 이렇게 사용할 수 있게 된다.

Column(
  children: [
    RedBox(),
    Divider(),
    Divider(),
    Divider(),
    BlueBox(),
  ],
)

이렇게 이용하는 것 말고도 다르게 사용할 수도 있다. ListView.separatorBuilder나 ListTile.divideTiles를 이용해서 말이다.

 

ListView.separated(
  itemCount: 30,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
  separatorBuilder: (context, index) {
    return Divider(); // 디바이더가 리스트 사이에 들어감
  },
)

파라미터인 separatorBuilder에 디바이더를 넣어서 리스트 타일 사이에 디바이더를 넣어줄 수 있다.

또한 그냥 ListTile에 생성자로 디바이더 속성이 붙어있다.

ListView(
  children: ListTile.divideTiles(
    context: context,
    tiles: [
      ListTile(title: Text('Item 1')),
      ListTile(title: Text('Item 2')),
      ListTile(title: Text('Item 3')),
    ],
    color: Colors.purple
  ).toList(),
)

이건 솔직히 조금 비추천인 사용방식이긴 한데 그래도 알아보자면 일단 정적 리스트일 때 사용되어야 하고 복잡한 것 없이 간단하게 Divider만 추가하고 싶을 때 사용해 주면 된다.

근데 살짝 골치 아픈 생성자인 게 tiles는 List<Widget> 타입이 아니라 Iterable<Widget> 타입을 갖고 있어서 toList()를 붙이고 children 안에 넣어야 사용할 수 있다;;

이런 것 말고도 디바이더를 이제 세로, 수직으로 사용하고 싶을 수 있는데 그럴 때에는 VerticalDividier 위젯을 사용해 주면 되겠다.

 

 

암튼 이렇게 Divder위젯에 대해 알아보았다. 난 평소에 그냥 완전하게 내 마음대로 만들 수 있는 Container를 Divider 대용으로 사용하긴 하는데 그래도 이렇게 보니까 꽤 괜찮게 사용할 수 있을 것 같다. 도움이 되었길 바라며 마치겠다.