스크롤 중에도 고정되는 헤더 만들기 – flutter_sticky_header 활용법

긴 리스트나 섹션이 많은 화면을 구성하다 보면, 사용자에게 현재 보고 있는 구간이 어디인지 명확하게 보여주는 UI가 필요할 때가 많습니다. 이럴 때 유용하게 사용할 수 있는 Flutter 라이브러리가 바로 flutter_sticky_header입니다.

이번 글에서는 flutter_sticky_header 라이브러리를 통해 스크롤 중에도 헤더가 고정되는 UI를 어떻게 구현할 수 있는지 소개하고, 실제로 적용할 수 있는 코드 예제와 함께 왜 이 라이브러리가 유용한지를 설명해보겠습니다.

---

flutter_sticky_header란?

flutter_sticky_header는 이름 그대로 스크롤 중에도 헤더가 상단에 고정(sticky) 되도록 만들어주는 라이브러리입니다. Flutter의 CustomScrollView와 Sliver 위젯을 기반으로 작동하며, 각 섹션별로 헤더와 컨텐츠를 분리해 구성할 수 있어 다양한 레이아웃에 활용할 수 있습니다.

공식 문서: flutter_sticky_header

---

왜 사용해야 할까?

ListView나 GroupedListView도 리스트를 구성하는 데에는 유용하지만, 스크롤 중에 헤더를 고정하고 싶다면 flutter_sticky_header가 더 적합합니다. 다음과 같은 장점이 있습니다:

• 각 섹션마다 고정 헤더 제공 가능
• 사용자 위치를 명확히 보여주는 UX
• CustomScrollView 기반으로 유연한 레이아웃 구성 가능
• 뉴스, 일정, 쇼핑몰 카테고리 등 그룹 데이터 표현에 적합

---

기본 사용 방법

1. 패키지 설치

pubspec.yaml에 다음과 같이 추가합니다:

dependencies:
  flutter_sticky_header: 사용자 버전

2. 코드 예제

아래는 5개의 섹션이 각각 헤더와 리스트를 가지는 간단한 예제입니다.

import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: StickyHeaderExample());
  }
}

class StickyHeaderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sticky Header 예제')),
      body: CustomScrollView(
        slivers: List.generate(5, (sectionIndex) {
          return SliverStickyHeader(
            header: Container(
              height: 60,
              color: Colors.blueGrey,
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              alignment: Alignment.centerLeft,
              child: Text(
                '섹션 $sectionIndex',
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
            ),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, i) => ListTile(title: Text('아이템 #$i')),
                childCount: 6,
              ),
            ),
          );
        }),
      ),
    );
  }
}

---

실제 활용 예시

flutter_sticky_header는 다양한 UI 시나리오에 활용될 수 있습니다. 예를 들어:

• 일정 관리 앱: 날짜별로 일정을 구분하고 각 날짜를 고정 헤더로 표시
• 쇼핑몰 앱: 카테고리별로 상품을 나누고 각 카테고리를 고정 헤더로 구성
• 알림 센터: 날짜별 알림 분류에서 날짜를 헤더로 고정

또한, SliverList 외에도 SliverGrid, SliverPadding, SliverAnimatedList 등 다양한 Sliver 위젯과 함께 사용하면 훨씬 더 복잡하고 정교한 레이아웃 구성도 가능합니다.

---

마무리

flutter_sticky_header는 사용자가 스크롤하는 동안에도 현재 위치를 직관적으로 인식할 수 있도록 도와주는 훌륭한 도구입니다. 리스트가 길어질수록, 정보가 많을수록 사용자 경험은 중요해지고, 그 중심에 있는 것이 바로 이런 고정 헤더 기능입니다.

Flutter에서 Sliver 구조에 익숙해진다면 더 많은 커스터마이징이 가능해지며, flutter_sticky_header는 그 출발점이 되어줄 수 있습니다.

그럼 오늘도 즐코 빡코!