[flutter] 플러터 앱에서 sticky 헤더를 사용한 포도주 목록 앱 구현하기

30 Nov 2023

flutter

이번 튜토리얼에서는 플러터(Flutter)를 사용하여 sticky 헤더를 가진 포도주 목록 앱을 구현하는 방법에 대해 알아보겠습니다. sticky 헤더는 사용자가 스크롤을 하더라도 항상 화면 상단에 고정되어 있는 헤더입니다.

필요한 패키지 설치하기

먼저, 플러터 앱에서 sticky 헤더를 구현하기 위해 다음 패키지를 설치해야 합니다:

dependencies:
  sticky_headers: ^0.2.0

이 패키지는 스크롤 가능한 일반 목록에 sticky 헤더를 추가하는 기능을 제공합니다.

데이터 모델링

포도주 목록 앱을 구현하기 위해 먼저 데이터 모델을 정의해야 합니다. 예를 들어, 각각의 포도주에는 이름과 설명이 있을 수 있습니다. 이러한 정보를 가지는 Wine 클래스를 만들어 보겠습니다:

class Wine {
  final String name;
  final String description;

  Wine({required this.name, required this.description});
}

스크롤 가능한 디자인 만들기

이제 데이터 모델을 정의했으니, 실제로 화면에 스크롤 가능한 디자인을 만들어 보겠습니다. 먼저, ListView.builder 위젯을 사용하여 포도주 목록을 표시할 수 있도록 합니다:

ListView.builder(
  itemCount: wines.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(wines[index].name),
      subtitle: Text(wines[index].description),
    );
  },
)

위 코드에서 wines는 Wine 객체의 리스트로, 실제로 구현해야 하는 데이터이며 각 항목에는 이름과 설명이 있습니다.

sticky 헤더 추가하기

이제 sticky 헤더를 사용해서 목록의 각 항목을 그룹화할 수 있습니다. StickyHeaderBuilder 위젯을 사용하여 구현해 보겠습니다:

ListView.builder(
  itemCount: wines.length,
  itemBuilder: (BuildContext context, int index) {
    return StickyHeaderBuilder(
      builder: (BuildContext context, double stuckAmount) {
        return Container(
          height: 50.0,
          color: Colors.grey[600],
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerLeft,
          child: Text(
            // 해당 그룹의 이름 표시
            wines[index].name.substring(0, 1),
            style: const TextStyle(color: Colors.white),
          ),
        );
      },
      content: ListTile(
        title: Text(wines[index].name),
        subtitle: Text(wines[index].description),
      ),
    );
  },
)

위 코드에서 StickyHeaderBuilder의 builder 콜백 함수를 사용하여 각 그룹의 sticky 헤더를 생성합니다. 헤더는 Container 위젯으로 구성되며, 여기서는 포도주의 이름 첫 글자를 표시합니다.

완성된 포도주 목록 앱

위의 코드를 조합하여 완성된 sticky 헤더를 사용한 포도주 목록 앱을 만들 수 있습니다. 이제 앱을 실행하고 스크롤해 보면 sticky 헤더가 항상 상단에 고정되어 있음을 확인할 수 있습니다.

마무리

이번 튜토리얼에서는 플러터를 사용하여 sticky 헤더를 가진 포도주 목록 앱을 구현하는 방법에 대해 알아보았습니다. sticky 헤더는 스크롤 가능한 앱에서 유용하게 사용될 수 있으며, 다른 목록을 구현하는 데에도 활용할 수 있습니다.

더 자세한 내용은 sticky_headers 패키지의 공식 문서를 참조하시기 바랍니다.