[flutter] 플러터 sticky 헤더를 가진 일정 관리 앱 만들기

30 Nov 2023

flutter

안녕하세요! 플러터(Flutter)를 사용하여 Sticky 헤더를 가진 일정 관리 앱을 만드는 방법을 알려드리겠습니다.

1. 프로젝트 설정

플러터를 사용하기 위해 Flutter SDK를 설치해야 합니다. 다음 명령어를 사용하여 Flutter SDK를 설치해주세요.

$ git clone https://github.com/flutter/flutter.git

Flutter SDK를 설치한 후, 앱 프로젝트를 생성합니다.

$ flutter create sticky_header_app

프로젝트에서 필요한 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  sticky_headers: ^0.2.3

패키지를 추가한 후, flutter packages get 명령어를 실행하여 패키지를 다운로드합니다.

2. 스크롤 가능한 일정 리스트 구현

먼저, 일정 리스트를 만들기 위해 ListView.builder 위젯을 사용합니다.

ListView.builder(
  itemCount: events.length,
  itemBuilder: (BuildContext context, int index) {
    final event = events[index];

    return ListTile(
      title: Text(event.title),
      subtitle: Text(event.date),
    );
  },
)

위 코드에서 events는 일정 데이터 목록을 가지고 있는 리스트입니다.

3. Sticky 헤더 추가

sticky_headers 패키지를 사용하여 Sticky 헤더를 추가할 수 있습니다.

먼저, sticky_headers 패키지를 임포트합니다.

import 'package:sticky_headers/sticky_headers.dart';

일정 리스트뷰를 StickyHeader 위젯으로 감싸서 Sticky 헤더를 생성합니다.

ListView.builder(
  itemCount: events.length,
  itemBuilder: (BuildContext context, int index) {
    final event = events[index];

    return StickyHeader(
      header: Container(
        height: 50,
        color: Colors.grey[300],
        alignment: Alignment.centerLeft,
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: Text(
          event.month,
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      content: ListTile(
        title: Text(event.title),
        subtitle: Text(event.date),
      ),
    );
  },
)

위 코드에서 event.month는 일정의 월을 나타내는 문자열입니다.

4. 헤더 스타일링

헤더를 원하는 대로 스타일링할 수 있습니다. headerBuilder 속성을 사용하여 커스텀 헤더 위젯을 생성할 수도 있습니다.

ListView.builder(
  itemCount: events.length,
  itemBuilder: (BuildContext context, int index) {
    final event = events[index];

    return StickyHeaderBuilder(
      builder: (BuildContext context, double stuckAmount) {
        return Container(
          height: 50.0,
          color: Colors.grey[300].withOpacity(1 - stuckAmount),
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          child: Text(
            event.month,
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
        );
      },
      content: ListTile(
        title: Text(event.title),
        subtitle: Text(event.date),
      ),
    );
  },
)

위 코드에서 stuckAmount는 스크롤 되는 정도에 따라 헤더의 투명도를 조절하기 위해 사용됩니다.

5. 끝으로

이렇게하면 플러터로 Sticky 헤더를 가진 일정 관리 앱을 만들 수 있습니다. Sticky 헤더는 다양한 앱에서 유용하게 사용할 수 있으니 활용해보세요!

더 자세한 정보는 공식 플러터 문서를 참조하시기 바랍니다.