[flutter] 플러터 스크롤뷰에서 sticky 헤더 만들기

30 Nov 2023

flutter

플러터(Flutter)는 사용자 인터페이스(UI)를 빌드하기 위한 크로스 플랫폼 프레임워크입니다. 스크롤뷰(ScrollView) 위에 고정된(sticky) 헤더를 만드는 것은 UI 개발에서 자주 사용되는 패턴 중 하나입니다. 이번 글에서는 플러터에서 스크롤뷰에 sticky 헤더를 추가하는 방법을 알아보겠습니다.

1. 스크롤뷰와 헤더 위젯 준비하기

먼저, 스크롤뷰와 헤더 위젯을 준비해야 합니다. 스크롤뷰는 보통 ListView, GridView, SingleChildScrollView 등을 사용하며, 헤더 위젯은 별도의 위젯으로 구성됩니다.

import 'package:flutter/material.dart';

class MyScrollView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sticky 헤더'),
      ),
      body: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('항목 $index'),
          );
        },
      ),
    );
  }
}

위 코드에서는 스크롤뷰로 ListView를 사용하고, 항목 개수를 100개로 설정하였습니다.

2. sticky 헤더 만들기

스크롤뷰의 상단에 고정되는 sticky 헤더를 만들기 위해서는 CustomScrollView 위젯을 사용해야 합니다. 또한, 스크롤뷰와 헤더 위젯 사이에 SliverAppBar를 추가하여 헤더를 고정합니다. 아래 코드를 참고해보세요.

import 'package:flutter/material.dart';

class MyScrollView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: Text('Sticky 헤더'),
            pinned: true,
            floating: false,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(
                  title: Text('항목 $index'),
                );
              },
              childCount: 100,
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서는 CustomScrollView를 사용하여 스크롤뷰를 생성하고, SliverAppBar로 sticky 헤더를 추가합니다. pinned 속성을 true로 설정하면 헤더가 화면 상단에 고정됩니다.

3. 결과 확인하기

위 코드를 실행시켜보면 스크롤뷰에 sticky 헤더가 생긴 것을 확인할 수 있습니다. 스크롤을 하더라도 헤더는 항상 화면 상단에 고정되어 보여집니다.

마무리

이번에는 플러터에서 스크롤뷰에 sticky 헤더를 추가하는 방법에 대해 알아보았습니다. 이를 활용하면 리스트나 그리드와 같은 스크롤 가능한 위젯에 편리하게 고정된 헤더를 추가할 수 있을 것입니다. 자세한 내용은 공식 플러터 문서를 참고해보세요.