[flutter] 플러터 sticky 헤더를 사용한 여행 일정 공유 앱 구현하기

30 Nov 2023

flutter

여행 일정을 공유하고 관리하는 앱을 만들기 위해 플러터의 sticky 헤더를 활용하는 방법에 대해 알아보겠습니다. sticky 헤더는 스크롤될 때 화면 상단에 고정되어 있는 헤더로, 여행 일정 앱에서는 일정 리스트의 제목, 날짜 등을 표시하기 위해 사용될 수 있습니다.

1. sticky 헤더 위젯 가져오기

먼저, 플러터 패키지에서 sticky 헤더를 구현할 수 있는 위젯을 가져와야 합니다. 이를 위해 flutter_sticky_header 패키지를 사용하는 것이 일반적입니다. pubspec.yaml 파일에 다음과 같은 의존성을 추가해주세요:

dependencies:
  flutter_sticky_header: ^0.4.0

의존성을 추가한 후, flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

2. 일정 리스트 구현하기

여행 일정 리스트를 구현하기 위해 ListView.builder를 사용합니다. ListView.builder는 아이템 수에 따라 동적으로 아이템을 생성할 수 있습니다. 여행 일정의 각 항목은 sticky 헤더와 함께 표시됩니다.

다음은 간단한 예시 코드입니다:

class TripSchedulePage extends StatelessWidget {
  final List<String> scheduleDates = ['2022-01-01', '2022-01-02', '2022-01-03'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('여행 일정'),
      ),
      body: ListView.builder(
        itemCount: scheduleDates.length,
        itemBuilder: (context, index) {
          final currentDate = scheduleDates[index];
          final currentItems = /* 해당 날짜에 해당하는 일정 아이템 리스트 가져오기 */;

          return StickyHeader(
            header: Container(
              height: 50,
              color: Colors.grey[300],
              padding: EdgeInsets.symmetric(horizontal: 16),
              alignment: Alignment.centerLeft,
              child: Text(
                currentDate,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            content: Column(
              children: currentItems.map((item) => /* 일정 아이템 위젯 생성 */).toList(),
            ),
          );
        },
      ),
    );
  }
}

여기서 scheduleDates는 날짜 목록을 나타내며, 실제로는 데이터베이스나 API에서 가져온 정보일 것입니다. 해당 날짜에 해당하는 일정 아이템 리스트를 가져오기 위해서는 해당 로직을 구현해야 합니다.

3. 기타 마무리 작업

이제 여행 일정 리스트를 구현하는 데 필요한 핵심 부분은 완료되었습니다. 그러나 아직 디자인이나 기능적인 면에 추가 작업이 필요할 수 있습니다. 예를 들어, 일정 아이템을 탭하면 해당 일정의 상세 정보를 보여주는 페이지로 이동하도록 할 수 있습니다.

추가로, 날짜의 형식을 변경하거나 sticky 헤더의 디자인을 수정할 수도 있습니다. 이러한 작업은 위젯의 스타일링에 관련됩니다.

결론

플러터의 sticky 헤더를 활용하여 여행 일정을 공유하고 관리하는 앱을 구현하는 방법에 대해 알아보았습니다. sticky 헤더를 사용하면 여행 일정의 제목과 날짜를 화면 상단에 고정하여 시각적인 효과를 줄 수 있습니다. 이를 바탕으로 앱의 기능과 디자인을 추가하여 완성도를 높일 수 있습니다.

참고 자료:

flutter_sticky_header 패키지