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

30 Nov 2023

flutter

개요

이번에는 플러터(Flutter)를 사용하여 여행 일정앱을 만들어보려고 합니다. 여행 일정앱의 중요한 요소 중 하나는 sticky 헤더입니다. sticky 헤더란 스크롤을 내렸을 때 화면 상단에 고정되어 있는 헤더를 말합니다. 앱에서 일정을 스크롤하면서도 항상 일정의 요약 정보를 표시할 수 있습니다.

필요한 패키지 설치

플러터에서 sticky 헤더를 구현하기 위해서는 flutter_sticky_header 패키지를 설치해야 합니다. 이 패키지는 헤더를 스크롤의 일부로 만들어줍니다.

dependencies:
  flutter_sticky_header: ^0.5.3

프로젝트의 pubspec.yaml 파일에 위의 내용을 추가하고, 터미널에서 flutter packages get 을 실행하여 패키지를 설치합니다.

일정 화면 디자인

먼저 일정 화면의 디자인을 구현해보겠습니다. 여행 일정을 나타내는 리스트를 만들고, 각 항목은 일정의 상세 정보를 보여주는 카드 형태로 표현하겠습니다.

import 'package:flutter/material.dart';

class TripSchedulePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('여행 일정'),
      ),
      body: ListView.builder(
        itemCount: 10, // 일정 항목 개수
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              title: Text('일정 제목'),
              subtitle: Text('일정 설명'),
            ),
          );
        },
      ),
    );
  }
}

위 코드에서는 ListView.builder와 Card 위젯을 사용하여 일정 목록을 구성하고, 각 일정 항목을 나타내는 ListTile 위젯을 추가했습니다.

sticky 헤더 구현

이제 sticky 헤더를 추가해서 일정 목록의 상단에 고정되도록 만들어보겠습니다. flutter_sticky_header 패키지를 사용하여 헤더를 구현할 수 있습니다.

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

class TripSchedulePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('여행 일정'),
      ),
      body: ListView.builder(
        itemCount: 10, // 일정 항목 개수
        itemBuilder: (context, index) {
          return StickyHeader(
            header: Container(
              height: 50,
              color: Colors.grey.withOpacity(0.7),
              padding: EdgeInsets.symmetric(horizontal: 16),
              alignment: Alignment.centerLeft,
              child: Text(
                '날짜',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            content: Card(
              child: ListTile(
                title: Text('일정 제목'),
                subtitle: Text('일정 설명'),
              ),
            ),
          );
        },
      ),
    );
  }
}

위 코드에서는 ListView.builder 대신 ListView.builder.stickyHeader를 사용하여 일정 목록과 sticky 헤더를 함께 구성했습니다. StickyHeader 위젯은 헤더와 내용을 함께 포함하는 역할을 합니다.

결론

이제 여행 일정 앱의 sticky 헤더를 구현하는 방법을 알게 되었습니다. flutter_sticky_header 패키지를 사용하여 간단하고 효과적으로 sticky 헤더를 구현할 수 있습니다. Flutter의 다양한 기능과 패키지들을 활용하여 멋진 애플리케이션을 만들어보세요!

목차

개요

필요한 패키지 설치

일정 화면 디자인

sticky 헤더 구현

결론