[flutter] 플러터에서 sticky 헤더를 사용한 가계 검색 앱 만들기

30 Nov 2023

flutter

안녕하세요! 이번에는 플러터에서 Sticky 헤더를 사용하여 가계 검색 앱을 만드는 방법을 알아보겠습니다. Sticky 헤더는 사용자가 스크롤 할 때 항상 화면 상단에 고정되는 헤더입니다. 이를 통해 사용자가 편리하게 데이터를 검색할 수 있습니다.

1. Sticky 헤더 라이브러리 추가

먼저, Flutter 프로젝트에 Sticky 헤더를 구현하기 위해 sticky_headers 라이브러리를 추가해야 합니다. pubspec.yaml 파일에 다음을 추가하세요.

dependencies:
  sticky_headers: ^0.2.3

그리고 터미널에서 flutter pub get 명령을 실행하여 라이브러리를 다운로드합니다.

2. Sticky 헤더 위젯 만들기

Sticky 헤더를 사용하기 위해 StickyHeader 위젯을 만들어야 합니다. 다음과 같이 코드를 작성하세요.

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

class StickyHeaderWidget extends StatelessWidget {
  final String headerText;

  StickyHeaderWidget({required this.headerText});

  @override
  Widget build(BuildContext context) {
    return StickyHeader(
      header: Container(
        // 헤더 스타일링 설정
        height: 50,
        color: Colors.blue,
        alignment: Alignment.center,
        padding: EdgeInsets.symmetric(horizontal: 16),
        child: Text(
          headerText,
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      content: ListView.builder(
        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: 10, // 데이터 개수에 맞게 변경해주세요.
        itemBuilder: (context, index) {
          // 리스트 아이템 뷰 만들기
          return ListTile(
            title: Text('검색 결과 $index'),
          );
        },
      ),
    );
  }
}

위 코드에서 StickyHeader 위젯은 헤더와 내용을 감싸고 스크롤 가능한 ListView를 제공합니다. headerText 매개변수는 각 StickyHeader 인스턴스에 표시할 헤더 텍스트를 전달하는데 사용됩니다.

3. Sticky 헤더 사용하기

이제 위에서 만든 StickyHeaderWidget을 실제 앱에서 사용해보겠습니다. 아래 예시 코드를 참고하세요.

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

class SearchApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('가계 검색 앱'),
      ),
      body: ListView(
        children: [
          StickyHeaderWidget(headerText: '2022년 9월'),
          StickyHeaderWidget(headerText: '2022년 8월'),
          StickyHeaderWidget(headerText: '2022년 7월'),
          // 추가적인 StickyHeaderWidget을 원하는 개수만큼 생성할 수 있습니다.
        ],
      ),
    );
  }
}

위 코드에서는 StickyHeaderWidget을 ListView의 자식으로 추가하여 스크롤 가능한 Sticky 헤더를 생성합니다. 각 StickyHeaderWidget은 원하는 월에 해당하는 가계 데이터를 보여줍니다.

마무리

위 방법을 따라하면 플러터에서 Sticky 헤더를 사용한 가계 검색 앱을 쉽게 만들 수 있습니다. StickyHeader 위젯과 sticky_headers 라이브러리를 사용하여 사용자에게 더 편리한 검색 경험을 제공할 수 있습니다.

더 자세한 사용 방법은 sticky_headers의 공식 문서를 참고해주세요.

Happy coding!