[flutter] Firebase Database와 플러터를 이용한 휴가 일정 관리 애플리케이션 만들기

30 Nov 2023

flutter

휴가 일정 관리는 많은 사람들이 직면하는 문제 중 하나입니다. 휴가 일정을 효율적으로 관리하고 공유할 수 있는 애플리케이션은 많은 도움을 줄 수 있습니다. 이번 튜토리얼에서는 Firebase Database를 사용하여 휴가 일정을 관리할 수 있는 플러터 애플리케이션을 만드는 방법을 알아보겠습니다.

1. Firebase 설정

휴가 일정을 저장하고 관리하기 위해 Firebase Database를 사용할 것입니다. 먼저 Firebase 프로젝트를 생성하고, 해당 프로젝트에 Firebase Database를 활성화해야 합니다. Firebase 프로젝트 생성과 Firebase Database 활성화에 대한 자세한 내용은 Firebase 공식 문서를 참조하시기 바랍니다.

2. 애플리케이션 UI 디자인

우리의 애플리케이션은 다음과 같은 기능을 가지고 있을 것입니다:

사용자가 휴가 일정을 추가할 수 있는 폼
사용자가 추가한 휴가 일정을 확인할 수 있는 리스트
휴가 일정을 수정하거나 삭제할 수 있는 기능

위의 기능을 가진 애플리케이션을 UI로 구현해봅시다. 예를 들어, 휴가 일정을 입력하는 폼은 다음과 같이 구성될 수 있습니다:

class AddVacationForm extends StatelessWidget {
  final TextEditingController _titleController = TextEditingController();
  final TextEditingController _dateController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _titleController,
          decoration: InputDecoration(labelText: '일정 제목'),
        ),
        TextField(
          controller: _dateController,
          decoration: InputDecoration(labelText: '일정 날짜'),
          onTap: () {
            showDatePicker(
              context: context,
              initialDate: DateTime.now(),
              firstDate: DateTime.now(),
              lastDate: DateTime(2022),
            ).then((selectedDate) {
              if (selectedDate != null) {
                _dateController.text = selectedDate.toString();
              }
            });
          },
        ),
        RaisedButton(
          child: Text('일정 추가'),
          onPressed: () {
            // Firebase Database에 일정 추가하는 로직 작성
          },
        ),
      ],
    );
  }
}

이와 같은 방식으로 나머지 UI 컴포넌트들을 구현할 수 있습니다. 이제 Firebase와 플러터를 연동하여 휴가 일정을 관리하는 기능을 추가해보겠습니다.

3. Firebase와 플러터 연동

Flutter에서 Firebase를 사용하기 위해서는 firebase_core와 firebase_database 패키지를 사용해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해줍시다:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.4.0
  firebase_database: ^7.1.2

본인의 애플리케이션에 맞게 필요한 패키지를 추가하고, flutter pub get 명령을 통해 의존성을 업데이트하세요.

그리고 main.dart 파일에서 Firebase를 초기화하는 코드를 작성해봅시다:

import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Firebase의 기능을 사용하기 위해 초기화를 진행하고, 애플리케이션을 실행시키는 코드입니다.

4. 휴가 일정 관리 기능 구현

이제 Firebase와 플러터를 연동한 애플리케이션을 통해 휴가 일정을 관리할 수 있는 기능을 구현해봅시다.

일정 추가하기

일정을 추가하는 기능은 Firebase Database에 데이터를 저장하는 작업을 수행하면 됩니다. 앞서 작성한 휴가 일정을 추가하는 기능을 다음과 같이 Firebase에 저장해봅시다:

FirebaseDatabase database = FirebaseDatabase.instance;
DatabaseReference vacationRef = database.reference().child('vacations');

void addVacation(String title, String date) {
  vacationRef.push().set({
    'title': title,
    'date': date,
  });
}

위의 addVacation 함수를 호출하면 Firebase Database에 휴가 일정이 추가됩니다.

일정 읽어오기

Firebase Database에서 저장된 일정을 읽어오는 기능은 ValueEventListener를 사용하여 구현할 수 있습니다. 아래 코드는 Firebase Database에서 휴가 일정을 읽어와 출력하는 예시입니다:

vacationRef.once().then((DataSnapshot snapshot) {
  Map<dynamic, dynamic> vacations = snapshot.value;
  vacations.forEach((key, value) {
    print('Title: ${value['title']}, Date: ${value['date']}');
  });
});

일정 수정하기

일정을 수정하는 기능은 데이터를 새로운 값으로 업데이트하면 됩니다. Firebase에서 데이터를 업데이트하는 코드는 다음과 같습니다:

void updateVacation(String key, String title, String date) {
  vacationRef.child(key).update({
    'title': title,
    'date': date,
  });
}

위의 updateVacation 함수를 호출하면 선택한 휴가 일정이 수정됩니다.

일정 삭제하기

일정을 삭제하는 기능은 remove() 함수를 사용하여 Firebase Database에서 데이터를 삭제하면 됩니다. 아래 코드는 선택한 휴가 일정을 삭제하는 예시입니다:

void deleteVacation(String key) {
  vacationRef.child(key).remove();
}

위의 deleteVacation 함수를 호출하면 선택한 휴가 일정이 삭제됩니다.

마무리

이제 Firebase Database와 플러터를 사용하여 휴가 일정을 관리하는 기능을 가진 애플리케이션을 만들 수 있게 되었습니다. Firebase를 사용하면 데이터베이스 관련 작업을 간편하게 처리할 수 있으며, 플러터의 다양한 UI 컴포넌트를 활용하여 사용자 친화적인 애플리케이션을 구축할 수 있습니다.

더 많은 Firebase 기능과 플러터 개발에 대한 자세한 정보는 Firebase 공식 문서와 플러터 공식 문서를 참조하시기 바랍니다.

목차