Colin's Blog
[flutter] 플러터 앱에서 sticky 헤더를 사용한 체중계 기록 앱 디자인하기

체중을 기록하는 앱은 많지만, 플러터를 사용하여 sticky 헤더를 사용한 디자인을 적용한 체중계 기록 앱을 만들어 보려고 합니다. 이번 튜토리얼에서는 플러터의 슬리버 위젯과 리스트뷰를 활용하여 sticky 헤더를 구현하는 방법을 알아보겠습니다.

필요한 패키지 설치

먼저, 플러터 프로젝트에서 sticky 헤더를 구현하기 위해 다음 패키지를 설치해야 합니다:

sticky_headers: ^0.2.0

pubspec.yaml 파일에 위의 패키지를 추가하고, flutter pub get 명령을 실행하여 패키지를 설치합니다.

체중 데이터 모델

체중 데이터를 저장하기 위한 모델 클래스를 생성합니다:

class WeightEntry {
  final String date;
  final double weight;

  WeightEntry({required this.date, required this.weight});
}

슬리버 위젯 사용하기

먼저, 슬리버 위젯을 사용하여 헤더와 아이템을 구성합니다:

class WeightTrackerApp extends StatelessWidget {
  final List<WeightEntry> weightEntries = [
    WeightEntry(date: "2022-01-01", weight: 70.5),
    WeightEntry(date: "2022-01-02", weight: 70.2),
    WeightEntry(date: "2022-01-03", weight: 69.8),
    // ...
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("체중 추적"),
      ),
      body: ListView.builder(
        itemCount: weightEntries.length,
        itemBuilder: (context, index) {
          final entryDate = weightEntries[index].date;
          final entryWeight = weightEntries[index].weight;
          final previousDate = (index > 0) ? weightEntries[index - 1].date : null;

          return StickyHeader(
            header: (previousDate != null && previousDate != entryDate)
                ? Text(entryDate)
                : null,
            content: ListTile(
              title: Text(entryWeight.toString()),
            ),
          );
        },
      ),
    );
  }
}

sticky_headers 사용하기

위 코드에서는 sticky_headers 패키지의 StickyHeader 위젯을 사용하여 sticky 헤더를 구현합니다. StickyHeader 위젯은 header와 content를 설정할 수 있으며, header에는 헤더를, content에는 헤더가 sticky 상태에서 보여지는 아이템을 설정합니다.

실행 결과

위의 코드를 실행하면, 체중 기록이 날짜별로 정렬되고, 같은 날짜의 기록은 sticky 헤더로 분리되어 나타납니다. 사용자는 스크롤을 내려도 헤더가 상단에 고정되는 기능을 확인할 수 있습니다.

결론

이번 튜토리얼에서는 플러터 앱에서 sticky 헤더를 사용한 체중계 기록 앱을 디자인하는 방법을 알아보았습니다. sticky_headers 패키지를 사용하여 슬리버 위젯과 리스트뷰를 조합하여 sticky 헤더를 구현할 수 있습니다. 이를 활용하여 다양한 디자인 요소를 추가해보세요.

참고 자료

© 2018 Colin. All rights reserved.