[flutter] 플러터에서 sticky 헤더를 가진 그리드뷰 만들기

30 Nov 2023

flutter

때로는 그리드뷰에서 스크롤되면서 헤더를 유지해야 할 때가 있습니다. 이러한 경우에는 sticky 헤더를 구현해야 합니다. Flutter에서 sticky 헤더를 가진 그리드뷰를 만드는 방법에 대해 알아보겠습니다.

1. sticky_headers 패키지 설치

먼저, sticky_headers 패키지를 설치해야 합니다. 이 패키지는 Flutter에서 스크롤 가능한 목록에서 sticky 헤더를 만들 수 있게 해줍니다. 아래의 명령어를 사용하여 패키지를 설치합니다.

flutter pub add sticky_headers

2. sticky 헤더 그리드뷰 구현

2.1. 패키지 가져오기

sticky_headers 패키지를 가져옵니다.

import 'package:sticky_headers/sticky_headers.dart';

2.2. 그리드뷰 구성

그리드뷰를 생성하고 해당 위젯을 StickyHeaderGridView로 감싸야 합니다. StickyHeader 위젯을 사용하여 sticky 헤더를 만들 수 있습니다.

StickyHeaderGridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 5.0,
    mainAxisSpacing: 5.0,
  ),
  itemCount: 20,
  itemBuilder: (BuildContext context, int index) {
    // 그리드 아이템 위젯 구성
    return GridTile(
      child: Container(
        color: Colors.grey,
        child: Center(
          child: Text('Item $index'),
        ),
      ),
    );
  },
  gridHeaderBuilder: (BuildContext context, int index) {
    // sticky 헤더 위젯 구성
    return Container(
      height: 50,
      color: Colors.blue,
      padding: EdgeInsets.all(10.0),
      alignment: Alignment.centerLeft,
      child: Text('Header $index', style: TextStyle(color: Colors.white)),
    );
  },
),

위의 코드에서 gridDelegate는 그리드뷰의 배치 방식을 정의합니다. itemBuilder는 그리드 아이템을 생성하고, gridHeaderBuilder는 sticky 헤더를 생성합니다.

마무리

위의 코드를 실행하면 sticky 헤더가 있는 그리드뷰를 만들 수 있습니다. sticky_headers 패키지의 다양한 설정을 사용하여 헤더와 그리드 아이템의 스타일을 조정할 수도 있습니다.

플러터에서 sticky 헤더를 가진 그리드뷰를 구현하는 방법을 알아보았습니다. 이를 참고하여 필요한 경우에 유용하게 사용해보세요.