[flutter] 플러터에서 sticky 헤더를 사용한 섹션별 리스트뷰 만들기

30 Nov 2023

flutter

플러터는 Google에서 개발한 크로스 플랫폼 프레임워크로, 아름답고 반응성이 뛰어난 애플리케이션을 빠르게 개발할 수 있습니다. 이번 블로그 포스트에서는 플러터에서 Sticky 헤더를 사용하여 섹션별 리스트뷰를 만드는 방법을 알아보겠습니다.

1. 패키지 설치

먼저, Sticky 헤더를 사용하기 위해 sticky_headers 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  sticky_headers: ^0.2.1

이후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

2. Sticky 헤더 위젯 생성

Sticky 헤더를 사용하기 위해서는 Sticky 헤더 위젯을 생성해야 합니다. 아래와 같이 StickyHeader 위젯을 사용하여 Sticky 헤더 위젯을 생성하세요.

import 'package:sticky_headers/sticky_headers.dart';

StickyHeader(
  header: Container(
    height: 50,
    color: Colors.grey,
    child: Center(
      child: Text(
        'Sticky Header',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
      ),
    ),
  ),
  content: ListView.builder(
    itemCount: 10,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text('Item $index'),
      );
    },
  ),
);

위 코드에서 StickyHeader의 header 속성에는 Sticky 헤더의 내용을, content 속성에는 리스트뷰의 내용을 작성합니다.

3. 섹션별 Sticky 헤더 생성

이제 리스트뷰를 섹션별로 나누기 위해 ListView.builder 대신 ListView.custom을 사용하겠습니다. 아래는 섹션별 Sticky 헤더가 있는 리스트뷰를 생성하는 예제입니다.

import 'package:sticky_headers/sticky_headers.dart';

ListView.custom(
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) {
      return StickyHeader(
        header: Container(
          height: 50,
          color: Colors.grey,
          child: Center(
            child: Text(
              'Section Header $index',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),
        content: ListView.builder(
          itemCount: 5,
          itemBuilder: (context, subIndex) {
            return ListTile(
              title: Text('Item ${index.toString()}-$subIndex'),
            );
          },
        ),
      );
    },
    childCount: 3, // 섹션 수
  ),
);

위 코드에서 SliverChildBuilderDelegate를 사용하여 리스트뷰의 아이템을 섹션별로 생성합니다. childCount 속성은 섹션의 수를 나타냅니다.

결론

위의 단계를 따라가면 플러터에서 Sticky 헤더를 사용한 섹션별 리스트뷰를 쉽게 만들 수 있습니다. Sticky 헤더를 사용하면 사용자 경험을 향상시킬 수 있으며, 애플리케이션을 더욱 직관적이고 유용하게 만들 수 있습니다. 추가적으로 sticky_headers 패키지에서 제공하는 다양한 기능을 사용해보세요.

GitHub Repository: https://github.com/slightfoot/flutter_sticky_headers

이제 Sticky 헤더를 사용하여 다양한 애플리케이션을 개발해보세요!