[flutter] 플러터 sticky 리스트뷰 헤더 만들기

30 Nov 2023

flutter

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 프레임워크로, 다양한 모바일 및 웹 애플리케이션을 개발할 수 있습니다. 이번에는 플러터에서 Sticky 리스트뷰의 헤더를 만드는 방법에 대해 알아보겠습니다.

1. Sticky 리스트뷰란?

Sticky 리스트뷰는 스크롤이 가능한 리스트뷰에서 항목을 그룹화하여 헤더를 만드는 기능입니다. 일반적으로 각 항목은 특정 그룹에 속하며, 해당 그룹의 헤더는 리스트뷰에서 스크롤될 때 항상 보여집니다.

2. Sticky 리스트뷰 헤더 만들기

Sticky 리스트뷰 헤더를 만들기 위해 flutter_sticky_header 패키지를 사용할 수 있습니다. 우선, pubspec.yaml 파일에 패키지를 추가해야 합니다.

dependencies:
  flutter_sticky_header: ^0.5.3

이제 위젯을 만들고 StickyHeader 위젯을 사용하여 헤더를 생성할 수 있습니다. 아래는 단순한 예제입니다.

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

class MyStickyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        if (index.isOdd) {
          return Container(
            height: 100,
            color: Colors.grey[300],
            child: Center(
              child: Text('Header ${index ~/ 2}'),
            ),
          );
        } else {
          return ListTile(
            title: Text('Item $index'),
          );
        }
      },
      itemCount: 20,
    );
  }
}

위 코드에서 ListView.builder를 사용하여 리스트뷰를 만들었습니다. 홀수 인덱스에는 Container 위젯을 사용하여 헤더를 만들고, 짝수 인덱스에는 ListTile 위젯을 사용하여 항목을 만들었습니다.

3. 결과 확인하기

이제 MyStickyList 위젯을 화면에 출력하여 Sticky 리스트뷰를 확인할 수 있습니다.

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Sticky List'),
      ),
      body: MyStickyList(),
    ),
  ));
}

위 코드를 main.dart 파일에 추가하고 실행하면, Sticky 리스트뷰가 생성되고 헤더가 스크롤될 때 항상 보여집니다.

4. 결론

위에서 설명한 방법을 통해 플러터에서 Sticky 리스트뷰 헤더를 만들 수 있습니다. flutter_sticky_header 패키지를 사용하여 쉽게 구현할 수 있으며, 화면에 고정된 헤더를 만들어 사용자 경험을 향상시킬 수 있습니다.