[flutter] 플러터 sticky 헤더를 가진 카드뷰 만들기

30 Nov 2023

flutter

이번 포스트에서는 플러터(Flutter)로 Sticky 헤더를 가진 카드뷰를 어떻게 만들 수 있는지 알아보겠습니다.

1. sticky_headers 패키지 추가하기

우선, Sticky 헤더를 구현하기 위해 sticky_headers 패키지를 사용해야 합니다. pubspec.yaml 파일에 해당 패키지를 추가해 주세요.

dependencies:
  sticky_headers: ^0.2.0

이후 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드해 주세요.

2. Sticky 헤더를 가진 ListView 만들기

다음으로는 Sticky 헤더를 가진 ListView를 만들어 보겠습니다. ListView.builder를 사용하여 아이템을 동적으로 생성하고, Sticky 헤더에는 리스트 아이템의 첫 글자를 표시하도록 구현해 보겠습니다.

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

class StickyHeaderCardView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sticky Header Card View'),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          // 리스트 아이템 생성
          String item = 'Item $index';

          // Sticky 헤더 생성
          Widget header = StickyHeader(
            header: Container(
              height: 50.0,
              color: Colors.grey[300],
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              alignment: Alignment.centerLeft,
              child: Text(
                item[0],
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
              ),
            ),
            content: ListTile(
              title: Text(item),
            ),
          );

          return header;
        },
        itemCount: 50,
      ),
    );
  }
}

3. 결과 확인하기

이제 앱을 실행하면 Sticky 헤더를 가진 카드뷰를 확인할 수 있습니다. ListView의 아이템들은 스크롤이 가능하며, Sticky 헤더는 스크롤에 상관없이 항상 화면 상단에 고정됩니다.

결론

플러터에서 Sticky 헤더를 가진 카드뷰를 만드는 방법에 대해 알아보았습니다. sticky_headers 패키지를 사용하여 ListView에 Sticky 헤더를 구현할 수 있습니다. 이를 활용하여 다양한 UI를 개발할 수 있습니다.