[flutter] 플러터 GridView에서 아이템 간의 들여쓰기나 구분선을 설정하는 방법은?

18 Dec 2023

flutter

들여쓰기를 적용하기 위해서는 GridView의 padding 속성을 활용할 수 있습니다. 아래의 코드는 수직 방향으로 10 픽셀의 들여쓰기를 추가하는 예시입니다.

GridView.builder(
  padding: const EdgeInsets.symmetric(vertical: 10.0),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    // 다른 속성들 추가
  ),
  itemBuilder: (BuildContext context, int index) {
    return // 아이템 위젯;
  },
  itemCount: // 아이템 개수,
)

구분선을 추가하기 위해서는 GridView의 separatorBuilder 속성을 사용할 수 있습니다. 아래의 코드는 각 아이템 사이에 수평 방향으로 10 픽셀 높이의 구분선을 추가하는 예시입니다.

GridView.builder(
  separatorBuilder: (BuildContext context, int index) {
    return SizedBox(
      height: 10.0,
    );
  },
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    // 다른 속성들 추가
  ),
  itemBuilder: (BuildContext context, int index) {
    return // 아이템 위젯;
  },
  itemCount: // 아이템 개수,
)

이 외에도 GridView의 다양한 속성을 활용하여 아이템 간의 들여쓰기나 구분선을 설정할 수 있습니다. 자세한 내용은 공식 플러터 문서를 참고하시기 바랍니다.