[flutter] 플러터 sticky 헤더를 사용한 지출 통계 앱 디자인하기

30 Nov 2023

flutter

지출 통계를 관리하고 시각화할 수 있는 앱을 개발하고 싶다면 플러터의 Sticky 헤더를 활용해 멋진 디자인을 만들 수 있습니다. Sticky 헤더는 스크롤되는 내용의 상단에 고정되어 있는 헤더를 의미합니다. 이 헤더는 사용자에게 항상 가시적으로 보여줌으로써 편리한 앱 사용 경험을 제공합니다.

디자인 요구사항

이 지출 통계 앱은 아래와 같은 요구사항을 충족해야 합니다:

지출 항목을 입력할 수 있는 입력 폼
날짜별로 지출 내역을 볼 수 있는 리스트
헤더에는 현재 선택된 날짜와 해당 날짜의 총 지출액을 표시해야 함
사용자가 날짜를 선택하면 해당 날짜의 지출 내역이 동적으로 업데이트되어야 함

스크린 구성 요소

지출 통계 앱의 스크린은 다음과 같이 구성됩니다:

입력 폼

지출 내역을 입력하는 폼입니다. 사용자는 항목 이름과 금액을 입력하고, 저장 버튼을 눌러 지출 내역을 저장할 수 있습니다.

날짜 선택

사용자는 지출 내역을 확인할 날짜를 선택할 수 있습니다. 이를 위해 헤더에는 DatePicker를 사용하여 날짜를 선택할 수 있는 버튼을 배치합니다.

지출 내역 리스트

해당 날짜의 지출 내역을 리스트 형태로 표시합니다. 각 항목에는 이름, 금액 및 부가 설명이 표시됩니다. 사용자는 리스트에서 항목을 스와이프하여 삭제할 수 있습니다.

Sticky 헤더 구현하기

플러터에서 Sticky 헤더를 구현하려면 CustomScrollView 위젯을 사용하면 됩니다. CustomScrollView는 스크롤 가능한 컨텐츠 영역과 Scroll physics를 제공하는 컨트롤러를 지정할 수 있습니다. Sticky 헤더는 SliverPersistentHeader 위젯으로 생성할 수 있습니다.

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      // 헤더 디자인 설정
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('지출 통계'),
      ),
    ),
    SliverPersistentHeader(
      pinned: true,
      delegate: StickyHeaderDelegate(
        minHeight: 60.0, // 최소 높이
        maxHeight: 60.0, // 최대 높이
        child: Container(
          color: Colors.white,
          child: Center(
            child: Text('20XX년 XX월 XX일 지출 합계: \$XXX'),
          ),
        ),
      ),
    ),
    // 지출 내역 리스트 구현
  ],
)

위의 코드에서 SliverAppBar은 헤더의 디자인을 설정하고, SliverPersistentHeader는 Sticky 헤더를 생성합니다. StickyHeaderDelegate 클래스에는 헤더의 최소/최대 높이 설정과 내용을 포함하는 자식 위젯이 있습니다.

결론

플러터의 Sticky 헤더를 활용하여 지출 통계 앱을 디자인할 수 있습니다. Sticky 헤더는 사용자에게 지출 내역을 편리하게 확인할 수 있는 기능을 제공하여 더 나은 사용자 경험을 제공합니다. 이번 예제를 참고하여 지출 통계 앱을 개발해 보세요.