[flutter] 플러터에서 sticky 헤더를 사용한 운동 기록 앱 구현하기

30 Nov 2023

flutter

이번 글에서는 플러터(Flutter)를 사용하여 sticky 헤더를 가진 운동 기록 앱을 구현하는 방법에 대해 알아보겠습니다.

1. sticky_headers 패키지 추가하기

먼저, sticky 헤더를 구현하기 위해 sticky_headers 패키지를 사용할 것입니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter

  sticky_headers: ^0.2.0

그리고 flutter packages get 명령어를 실행하여 패키지를 설치해주세요.

2. 단계별 운동 기록 페이지 구현하기

이제 단계별 운동 기록을 할 수 있는 페이지를 구현해보겠습니다. 우선, sticky_headers 패키지를 임포트해주세요.

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

그리고 ListView.builder 위젯을 사용하여 기록할 항목들을 보여주도록 구현해주세요. 이때, StickyHeader 위젯을 사용하여 헤더를 sticky하게 만들어줍니다.

ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    if (index % 5 == 0) {
      // 헤더 아이템
      return StickyHeader(
        header: Container(
          height: 50,
          color: Colors.grey[200],
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          child: Text('Step ${index ~/ 5}'),
        ),
        content: Container(
          height: 100,
          color: Colors.white,
          alignment: Alignment.center,
          child: Text('Exercise item $index'),
        ),
      );
    } else {
      // 운동 기록 아이템
      return ListTile(
        title: Text('Exercise item $index'),
      );
    }
  },
  itemCount: 50,
),

위의 코드에서 itemCount를 원하는 운동 기록 항목의 수로 변경해주세요.

3. 주요 기능 추가하기

실제 운동 기록을 입력하고 저장하는 기능을 추가해보겠습니다.

운동 기록을 입력할 수 있는 다이얼로그를 띄우는 함수를 만듭니다.
다이얼로그에서 입력한 기록을 저장하는 함수를 만듭니다.

void showRecordDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      String record;
      return AlertDialog(
        title: Text('운동 기록 입력'),
        content: TextField(
          onChanged: (value) {
            record = value;
          },
        ),
        actions: <Widget>[
          FlatButton(
            child: Text('취소'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          FlatButton(
            child: Text('저장'),
            onPressed: () {
              saveRecord(record);
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

void saveRecord(String record) {
  // 입력한 기록을 저장하는 로직을 구현해주세요.
  // 예를 들어, DB에 저장하거나 파일로 저장하는 등의 방법을 사용할 수 있습니다.
}

위의 코드를 적절한 위치에 추가해주세요. 그리고 운동 기록 페이지에서 운동 기록을 추가할 수 있는 버튼을 추가해주세요.

floatingActionButton: FloatingActionButton(
  child: Icon(Icons.add),
  onPressed: () {
    showRecordDialog(context);
  },
),

4. 마무리

이제 운동 기록 앱이 완성되었습니다. flutter run 명령어를 사용하여 앱을 실행해보고, 여러 가지 기록을 추가하여 정상적으로 동작하는지 확인해보세요.

이번 글에서는 플러터를 사용하여 sticky 헤더를 가진 운동 기록 앱을 구현하는 방법에 대해 알아보았습니다. 추가로 UX를 개선하거나 다양한 기능을 추가하여 앱을 보완해보세요.

참고 자료:

sticky_headers 패키지: https://pub.dev/packages/sticky_headers
Flutter 공식 문서: https://flutter.dev/docs