[flutter] Firebase Firestore와 플러터를 이용한 운동일지 애플리케이션 만들기

30 Nov 2023

flutter

소개

이번 블로그 포스트에서는 플러터(Flutter)와 Firebase Firestore를 이용하여 운동일지 애플리케이션을 만드는 방법을 소개하고자 합니다. Firebase Firestore는 실시간 데이터베이스로서 서버와의 통신을 통해 데이터의 동기화 및 저장을 제공합니다. 플러터는 Google에서 개발한 UI 프레임워크로서, 하나의 코드로 안드로이드와 iOS 애플리케이션을 모두 개발할 수 있습니다.

시작하기 전에

이 튜토리얼을 진행하기 위해서는 다음 사항들이 필요합니다:

Flutter SDK 설치
Android 또는 iOS 개발 환경 설정
Firebase 프로젝트 생성 및 Firestore 설정

프로젝트 설정

프로젝트 생성

먼저, Flutter 프로젝트를 생성합니다.

flutter create exercise_tracker
cd exercise_tracker

Firebase 설정

Firebase Console에서 새로운 프로젝트를 생성한 후, Firestore Database를 활성화합니다. Firebase SDK 설정을 위해 google-services.json 파일을 프로젝트의 android/app/ 디렉토리에 추가합니다.

의존성 추가

pubspec.yaml 파일을 열고 필요한 Firebase 관련 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.4
  cloud_firestore: ^3.1.7

의존성을 추가한 후에는 flutter pub get 명령을 실행하여 의존성을 설치합니다.

Firestore 연동

Firebase 초기화

먼저, 메인 함수에서 Firebase를 초기화합니다.

import 'package:firebase_core/firebase_core.dart';

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

데이터 쓰기

exercise.dart라는 새로운 파일을 생성하고, 다음과 같이 작성합니다.

import 'package:cloud_firestore/cloud_firestore.dart';

class Exercise {
  String name;
  int duration;

  Exercise({required this.name, required this.duration});

  Future<void> save() async {
    await FirebaseFirestore.instance
        .collection('exercises')
        .add({'name': name, 'duration': duration});
  }
}

save 함수는 Firestore의 exercises 컬렉션에 운동의 이름과 기간을 저장하는 역할을 합니다.

데이터 읽기

home_screen.dart 파일을 열고 다음과 같이 수정합니다.

import 'package:cloud_firestore/cloud_firestore.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Exercise Tracker'),
      ),
      body: StreamBuilder<QuerySnapshot>(
        stream: FirebaseFirestore.instance.collection('exercises').snapshots(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.docs.length,
              itemBuilder: (context, index) {
                var exercise = snapshot.data!.docs[index];
                return ListTile(
                  title: Text(exercise['name']),
                  subtitle: Text('Duration: ${exercise['duration']} minutes'),
                );
              },
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

StreamBuilder 위젯을 사용하여 Firestore의 exercises 컬렉션의 실시간 데이터를 읽고 화면에 표시합니다.

데이터 추가하기

add_exercise_screen.dart 파일을 생성하고, 다음과 같이 작성합니다.

import 'package:flutter/material.dart';

class AddExerciseScreen extends StatefulWidget {
  @override
  _AddExerciseScreenState createState() => _AddExerciseScreenState();
}

class _AddExerciseScreenState extends State<AddExerciseScreen> {
  String _name = '';
  int _duration = 0;

  void _saveExercise() {
    Exercise exercise = Exercise(name: _name, duration: _duration);
    exercise.save().then((_) {
      Navigator.pop(context);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add Exercise'),
      ),
      body: Column(
        children: [
          TextField(
            onChanged: (value) {
              setState(() {
                _name = value;
              });
            },
            decoration: InputDecoration(
              labelText: 'Exercise Name',
            ),
          ),
          TextField(
            onChanged: (value) {
              setState(() {
                _duration = int.parse(value);
              });
            },
            decoration: InputDecoration(
              labelText: 'Exercise Duration (minutes)',
            ),
          ),
          ElevatedButton(
            onPressed: _saveExercise,
            child: Text('Save'),
          ),
        ],
      ),
    );
  }
}

AddExerciseScreen 위젯은 사용자로부터 운동의 이름과 기간을 입력받고, Exercise 객체를 생성하여 Firestore에 저장합니다.

마무리

이제 Firebase Firestore와 플러터를 이용한 운동일지 애플리케이션을 만들기 위한 기본적인 설정과 데이터의 쓰기 및 읽기를 구현하는 방법을 배웠습니다. 플러터와 Firebase를 함께 사용하면 간단하고 효율적인 애플리케이션 개발이 가능해집니다. 추가적인 UI 디자인 및 기능을 어떻게 구현할지에 대해서는 여러분의 창의성에 달려있습니다.

더 자세한 내용은 플러터와 Firebase의 공식 문서를 참고하시기 바랍니다.

소개