플러터에서 sticky 헤더를 구현하는 방법을 알아보겠습니다. Sticky 헤더는 스크롤되는 내용 중에서 특정 영역이 항상 보이도록 고정하는 기능입니다. 이 기능을 구현하는 데에는 SliverAppBar 위젯과 CustomScrollView를 사용할 수 있습니다.

SliverAppBar과 CustomScrollView

SliverAppBar는 헤더를 스크롤될 때 화면 상단에 고정할 수 있도록 하는 위젯입니다. SliverAppBar를 사용하는데에는 CustomScrollView를 함께 사용해야 합니다. CustomScrollView는 여러 개의 슬리버를 가질 수 있는 스크롤 가능한 위젯입니다.

Sticky 헤더 구현하기

1. SliverAppBar를 생성하여 sticky 헤더를 정의합니다. SliverAppBar는 floating: true로 설정하여 스크롤에 따라 헤더가 위로 올라가도록 만듭니다.

SliverAppBar(
  floating: true,
  // 헤더 내용 추가
  // ...
)

1. CustomScrollView를 생성하고 SliverAppBar를 자식 위젯으로 추가합니다. 그 아래에 스크롤 가능한 리스트나 그리드 등의 내용을 추가합니다.

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      floating: true,
      // 헤더 내용 추가
      // ...
    ),
    // 스크롤 가능한 내용 추가
    // ...
  ],
);

1. 이제 SliverList, SliverGrid, SliverToBoxAdapter 등을 사용하여 스크롤 가능한 컨텐츠를 추가할 수 있습니다. 예를 들어, SliverList와 ListTile 위젯을 사용하여 리스트를 구현할 수 있습니다.

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      floating: true,
      // 헤더 내용 추가
      // ...
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
        return ListTile(
          title: Text('리스트 아이템 $index'),
        );
      }, childCount: 20),
    ),
  ],
);

1. 위와 같이 구현하면 리스트가 스크롤될 때 헤더가 화면 상단에 고정되고 리스트 아이템이 스크롤 가능해집니다.

마치며

위에서는 SliverAppBar와 CustomScrollView를 사용하여 플러터에서 sticky 헤더를 구현하는 방법을 알아보았습니다. 이 방법을 활용하여 앱 내에서 헤더를 고정하고 컨텐츠를 스크롤할 수 있는 사용자 친화적인 인터페이스를 구현해보세요.

참고 자료

• Flutter Documentation - SliverAppBar
• Flutter Documentation - CustomScrollView