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

30 Nov 2023

flutter

개요

이번 포스트에서는 Flutter와 Firebase Database를 이용하여 일정 관리 애플리케이션을 만들어보려고 합니다. 사용자는 앱을 통해 일정을 추가, 수정, 삭제할 수 있으며, Firebase Database를 통해 이러한 일정 데이터를 실시간으로 동기화할 수 있습니다.

Firebase Database 설정하기

Firebase Console에 접속하여 새로운 프로젝트를 생성하고, Firebase Database를 활성화합니다. 그 후, Firebase SDK 설정 파일을 다운로드합니다.

Flutter 프로젝트 설정하기

Flutter 개발 환경을 구축하여 새로운 Flutter 프로젝트를 생성합니다. Firebase에 연결하기 위해 flutterfire 패키지를 설치합니다.

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

일정 목록 화면 만들기

앱의 메인 화면에서는 일정 목록을 보여줍니다. ListView 위젯을 사용하여 일정 목록을 스크롤할 수 있도록 만듭니다. ListTile 위젯을 사용하여 일정의 제목, 날짜 및 시간을 표시합니다.

import 'package:flutter/material.dart';

class ScheduleListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('일정 목록'),
      ),
      body: ListView.builder(
        itemCount: 10, // 일정 개수
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            leading: Icon(Icons.event),
            title: Text('일정 제목'),
            subtitle: Text('일정 날짜 및 시간'),
            onTap: () {
              // 일정 상세 화면으로 이동
            },
          );
        },
      ),
    );
  }
}

Firebase Database와 연동하기

Firebase에서 제공하는 FirebaseDatabase 인스턴스를 사용하여 데이터베이스에 접근합니다. DatabaseReference를 사용하여 데이터를 읽고 쓸 수 있습니다. Firebase의 onValue 이벤트를 사용하여 데이터 변경 사항을 실시간으로 감지할 수 있습니다.

import 'package:firebase_database/firebase_database.dart';

final databaseReference = FirebaseDatabase.instance.reference();

class ScheduleListScreen extends StatelessWidget {
  // ...

  @override
  Widget build(BuildContext context) {
    // ...

    @override
    void initState() {
      super.initState();
      databaseReference.child('schedule').onValue.listen((event) {
        // 일정 목록 데이터 갱신
      });
    }

    // ...
  }
}

일정 추가하기

일정을 추가하기 위해 FloatingActionButton을 사용합니다. 일정 추가 화면으로 이동하여 사용자로부터 일정 정보를 입력 받고, Firebase Database에 일정을 추가합니다.

class ScheduleListScreen extends StatelessWidget {
  // ...

  @override
  Widget build(BuildContext context) {
    // ...

    FloatingActionButton(
      onPressed: () {
        // 일정 추가 화면으로 이동
      },
      child: Icon(Icons.add),
    ),

    // ...
  }
}

일정 수정하기

리스트에서 일정을 탭하면 일정의 세부 정보가 표시되는 일정 상세 화면으로 이동합니다. 수정 버튼을 눌러 일정 수정 화면으로 이동하여 Firebase Database에서 해당 일정을 업데이트합니다.

class ScheduleDetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // ...

    RaisedButton(
      onPressed: () {
        // 일정 수정 화면으로 이동
      },
      child: Text('수정'),
    ),

    // ...
  }
}

일정 삭제하기

일정 상세 화면에서 삭제 버튼을 누르면 일정을 삭제합니다. Firebase Database에서 해당 일정을 삭제합니다.

class ScheduleDetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // ...

    RaisedButton(
      onPressed: () {
        // 일정 삭제
      },
      child: Text('삭제'),
    ),

    // ...
  }
}

위와 같이 Flutter와 Firebase Database를 이용하여 간단한 일정 관리 애플리케이션을 만들었습니다. Firebase를 통해 데이터를 실시간으로 동기화하므로, 여러 사용자가 동시에 앱을 사용할 수 있고, 일정 변경 사항을 즉시 확인할 수 있습니다.

목차

개요