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

30 Nov 2023

flutter

이번 블로그에서는 플러터를 사용하여 sticky 헤더를 가진 캘린더 일정 앱을 만드는 방법에 대해 알아보겠습니다.

1. 소개

캘린더 일정 앱은 사용자가 일정을 추가하고 보기 위해 사용되는 앱입니다. 대부분의 캘린더 앱은 상단에 월별 헤더를 가지고 있으며, 일정을 추가할 수 있고 일정을 시간별로 보여주는 기능을 제공합니다. 하지만 이번 예제에서는 추가적으로 일정을 sticky 헤더로 분류하여 보여줄 것입니다.

2. 개발 준비

이 예제를 구현하기 위해 Flutter 프레임워크와 해당 프로젝트의 의존성을 추가해야 합니다. 또한 날짜와 시간을 다루는 라이브러리도 필요합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_sticky_header: ^0.4.0
  table_calendar: ^2.2.3
  date_utils: ^0.2.2

flutter_sticky_header는 sticky 헤더를 구현하기 위해 사용되며 table_calendar는 캘린더 보기를 구현하기 위해 사용됩니다. date_utils는 날짜와 시간을 다루기 위한 유용한 함수들을 제공합니다.

3. 구현

3.1. 캘린더 화면

먼저 캘린더 화면을 만들기 위해 TableCalendar 위젯을 사용합니다. 이 위젯은 월별로 일정을 표시하고 사용자가 일정을 추가할 수 있는 기능을 제공합니다.

TableCalendar(
  calendarController: _calendarController,
  events: _events,
  onDaySelected: _onDaySelected,
  headerVisible: false,
),

calendarController는 캘린더를 제어하기 위해 사용됩니다. events는 일정을 가지고 있는 맵이며, onDaySelected는 사용자가 날짜를 선택했을 때 호출되는 콜백 함수입니다. headerVisible을 false로 설정하여 상단에 월별 헤더를 숨길 수 있습니다.

3.2. 스티키 헤더

일정을 스티키 헤더로 분류하고 보여주기 위해 StickyHeader 위젯을 사용합니다. 이 위젯은 헤더와 목록을 감싸고 헤더를 화면 위로 고정시킵니다.

StickyHeader(
  header: Container(
    height: 50,
    color: Colors.grey,
    alignment: Alignment.centerLeft,
    padding: EdgeInsets.symmetric(horizontal: 16),
    child: Text(
      headerTitle,
      style: TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 18,
      ),
    ),
  ),
  content: ListView.builder(
    itemCount: events.length,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text(events[index].title),
        subtitle: Text(events[index].time),
      );
    },
  ),
),

위의 예제에서 header는 헤더의 내용을 정의하고, content는 스티키 헤더가 감싸는 내용을 정의합니다. 이 예제에서는 헤더에 일정의 날짜를 표시하고, 목록은 일정의 제목과 시간을 보여줍니다.

4. 결론

위의 예제를 따라하면 sticky 헤더를 가진 캘린더 일정 앱을 구현할 수 있습니다. 플러터의 다양한 위젯과 라이브러리를 활용하여 사용자 친화적이고 기능적인 앱을 만들 수 있습니다.

더 자세한 내용은 아래의 참고 자료를 확인해주세요.