[flutter] sticky 헤더를 가진 플러터 리스트뷰 예제

30 Nov 2023

flutter

안녕하세요! Flutter로 Sticky 헤더를 가진 리스트뷰를 구현하는 예제에 대해 알려드리겠습니다.

필요한 패키지 설치하기

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

dependencies:
  flutter:
    sdk: flutter
  sticky_headers: ^0.2.0

그리고 flutter pub get 명령을 통해 패키지를 다운로드 받으세요.

Sticky 헤더 리스트뷰 구현하기

이제 sticky_headers 패키지를 사용하여 Sticky 헤더를 가진 리스트뷰를 구현해보겠습니다. 아래는 간단한 예제 코드입니다.

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

class StickyHeaderListViewExample extends StatelessWidget {
  final List<String> items = List.generate(50, (index) => 'Item ${index + 1}');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sticky 헤더 리스트뷰 예제'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return StickyHeader(
            header: Container(
              height: 50,
              color: Colors.grey,
              alignment: Alignment.center,
              child: Text('Header ${index + 1}'),
            ),
            content: ListTile(
              title: Text(items[index]),
            ),
          );
        },
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: StickyHeaderListViewExample(),
  ));
}

위 코드에서는 sticky_headers 패키지의 StickyHeader 위젯을 사용하여 Sticky 헤더를 구현했습니다. header 속성에는 Sticky 헤더로 사용할 위젯을, content 속성에는 리스트 아이템을 삽입하면 됩니다.

실행해보기

위 예제 코드를 실행해보면 Sticky 헤더를 가진 리스트뷰가 화면에 나타나게 됩니다. 각 헤더는 해당 섹션의 리스트 아이템을 구분하는 역할을 합니다.

결론

이렇게 sticky_headers 패키지를 사용하여 Flutter에서 Sticky 헤더를 가진 리스트뷰를 구현할 수 있습니다. Sticky 헤더는 자주 사용되는 패턴 중 하나이므로 유용하게 활용할 수 있습니다.

더 자세한 내용은 sticky_headers 패키지의 공식 문서를 참고해주세요.

감사합니다!