[flutter] ListView에서 아이템의 분할선 스타일 변경하기

08 Dec 2023

flutter

Flutter 앱에서 ListView를 사용하면 아이템 목록을 표시할 수 있습니다. 각 아이템은 기본적으로 분할선으로 구분됩니다. 분할선 스타일을 변경하는 방법에 대해 알아보겠습니다.

1. Divider 사용하여 분할선 스타일 변경하기

ListView 위젯 내부에 있는 Divider 위젯을 사용하여 분할선의 스타일을 직접 지정할 수 있습니다.

ListView.builder(
  itemCount: _dataList.length,
  itemBuilder: (context, index) {
    return Column(
      children: <Widget>[
        ListTile(
          title: Text(_dataList[index]),
        ),
        Divider(
          color: Colors.grey, // 분할선 색상 지정
          thickness: 1, // 분할선 두께 지정
        ),
      ],
    );
  },
)

2. CustomDivider 위젯 사용하기

분할선의 스타일을 자유롭게 커스터마이징하기 위해 CustomDivider와 같은 사용자 정의 위젯을 만들어 사용할 수도 있습니다.

class CustomDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 1,
      width: double.infinity,
      color: Colors.grey, // 분할선 색상 지정
    );
  }
}

ListView.builder(
  itemCount: _dataList.length,
  itemBuilder: (context, index) {
    return Column(
      children: <Widget>[
        ListTile(
          title: Text(_dataList[index]),
        ),
        CustomDivider(), // CustomDivider 위젯 사용
      ],
    );
  },
)

위와 같이 ListView를 구성하는 방법을 조정하여 분할선의 스타일을 쉽게 변경할 수 있습니다.

이러한 방법을 통해 ListView에서 아이템의 분할선 스타일을 유연하게 조절할 수 있습니다.

1. Divider 사용하여 분할선 스타일 변경하기

2. CustomDivider 위젯 사용하기

참고 자료