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

08 Dec 2023

flutter

Flutter에서 ListView를 사용할 때 각 아이템에 배경색을 설정하는 방법에 대해 알아보겠습니다.

1. ListView.builder 사용

ListView.builder를 사용하여 ListView를 생성합니다. ListView.builder의 itemBuilder 속성을 사용하여 각 아이템의 UI를 정의할 수 있습니다.

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (context, index) {
    return Container(
      color: Colors.blue, // 아이템의 배경색을 설정합니다
      child: ListTile(
        title: Text('Item $index'),
      ),
    );
  },
)

2. ListView.separated 사용

ListView.separated를 사용하여 각 아이템을 구분하는 구분선을 포함한 ListView를 생성할 수 있습니다. 각 아이템의 배경색은 separatorBuilder에서 정의할 수 있습니다.

ListView.separated(
  itemCount: itemCount,
  separatorBuilder: (context, index) => Divider(),
  itemBuilder: (context, index) {
    return Container(
      color: Colors.blue, // 아이템의 배경색을 설정합니다
      child: ListTile(
        title: Text('Item $index'),
      ),
    );
  },
)

3. ListTile의 배경색 설정

만약 각 아이템이 ListTile로 구성되어 있다면, ListTile의 tileColor 속성을 사용하여 배경색을 직접 지정할 수 있습니다.

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (context, index) {
    return ListTile(
      tileColor: Colors.blue, // 아이템의 배경색을 설정합니다
      title: Text('Item $index'),
    );
  },
)

위와 같은 방법으로 ListView에서 각 아이템의 배경색을 설정할 수 있습니다.

더 많은 정보를 얻고 싶다면, Flutter 공식 문서를 참고해보세요.