[flutter] ListView에서 아이템의 경계선 스타일 변경하기
Flutter 앱을 개발하다 보면 ListView에서 각 아이템의 경계선 스타일을 변경해야 하는 경우가 있습니다. 이 포스트에서는 ListView의 아이템 경계선을 변경하는 방법에 대해 알아보겠습니다.
1. Divider 사용하기
ListView의 아이템 간에 구분선을 추가하는 방법 중 하나는 Divider를 사용하는 것입니다. 이 방법은 간단하고 편리하지만, Divider의 스타일을 변경할 수 있는 옵션이 제한적입니다.
ListView.separated(
itemBuilder: (context, index) {
return ListTile(
title: Text('아이템 $index'),
);
},
separatorBuilder: (context, index) {
return Divider(
color: Colors.grey,
thickness: 1,
);
},
itemCount: 10,
)
2. Custom Divider Widget 만들기
Divider를 커스터마이즈하려면 Custom Divider Widget을 만들어서 사용할 수 있습니다. 이 방법을 사용하면 Divider의 스타일을 더 세밀하게 컨트롤할 수 있습니다.
class CustomDivider extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 1,
color: Colors.grey,
margin: EdgeInsets.symmetric(horizontal: 16),
);
}
}
ListView.builder(
itemBuilder: (context, index) {
return Column(
children: [
ListTile(
title: Text('아이템 $index'),
),
CustomDivider(),
],
);
},
itemCount: 10,
)
3. 아이템 커스텀화
ListView의 아이템 자체에 경계선을 추가하는 방법도 있습니다. ListTile이나 다른 커스텀 위젯을 사용하여 아이템에 구분 요소를 추가할 수 있습니다.
ListView.builder(
itemBuilder: (context, index) {
return Column(
children: [
ListTile(
title: Text('아이템 $index'),
),
Container(
height: 1,
color: Colors.grey,
margin: EdgeInsets.symmetric(horizontal: 16),
),
],
);
},
itemCount: 10,
)
결론
ListView의 아이템 경계선을 변경하는 여러 가지 방법을 알아봤습니다. 각 방법마다 장단점이 있으니 상황에 맞게 선택하여 사용하시면 됩니다.
내용을 살펴본 후 여러분의 코드에 적용해보시기 바랍니다. 감사합니다!