[flutter] ListView 아이템의 배경색 설정하기

08 Dec 2023

flutter

Flutter 앱에서 ListView를 사용하여 여러 항목을 표시할 때, 각 항목의 배경색을 설정하는 방법에 대해 알아보겠습니다.

ListView.builder 사용하기

ListView.builder를 사용하여 ListView를 생성할 수 있습니다. 이를 통해 항목의 수가 많아도 효율적으로 화면에 표시할 수 있습니다.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Container(
      color: index % 2 == 0 ? Colors.blue : Colors.green,
      child: ListTile(
        title: Text(items[index]),
      ),
    );
  },
)

위의 코드에서 ListView.builder의 itemBuilder 함수에서 각 항목의 배경색을 Container 위젯의 color 속성을 통해 설정하였습니다. 여기서 items는 ListView에 표시될 항목의 목록을 의미합니다.

ListView.separated 사용하기

또 다른 방법으로는 ListView.separated를 사용하여 각 항목 간의 구분선을 추가하고, 이를 활용하여 배경색을 설정할 수 있습니다.

ListView.separated(
  itemCount: items.length,
  separatorBuilder: (context, index) => Divider(),
  itemBuilder: (context, index) {
    return Container(
      color: index % 2 == 0 ? Colors.blue : Colors.green,
      child: ListTile(
        title: Text(items[index]),
      ),
    );
  },
)

ListView.separated를 사용하면 separatorBuilder 함수를 통해 각 항목 사이에 구분선을 추가할 수 있습니다. 위의 예시에서는 Divider 위젯을 사용하여 각 항목 사이에 선을 그었습니다.

이렇게 ListView의 각 항목에 배경색을 설정하는 방법을 알아보았습니다.

참고문헌: