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

30 Nov 2023

flutter

우리는 Firebase Database를 사용하여 플러터(Flutter)를 이용한 운동일지 애플리케이션을 만들어 보려고 합니다. 이 애플리케이션은 사용자가 운동 관련 데이터를 기록하고 저장할 수 있는 기능을 제공합니다.

Firebase 프로젝트 설정하기

Firebase 콘솔에 접속하여 새로운 프로젝트를 생성합니다.
프로젝트 설정으로 들어가서 Android 앱을 추가합니다.
Google Play 서비스의 설정 파일(google-services.json)을 다운로드 받아 프로젝트의 android/app 디렉토리에 추가합니다.
Firebase 콘솔에서 나중에 사용할 Firestore Database를 활성화합니다.

플러터(Flutter) 프로젝트 설정하기

플러터 프로젝트를 생성합니다.
pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  firebase_core: ^1.0.1
  firebase_database: ^7.0.0

android/app/build.gradle 파일에 다음 추가합니다.

apply plugin: 'com.google.gms.google-services'

android/build.gradle 파일에 다음 추가합니다.

classpath 'com.google.gms:google-services:4.3.5'

앱 실행에 필요한 Firebase 초기화 코드를 작성합니다.

import 'package:firebase_core/firebase_core.dart';

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

Firebase Database 사용하기

Firebase Database에 데이터를 저장하기 위해 데이터 모델을 생성합니다.

class Exercise {
  final String name;
  final int duration;
  final String date;

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

  Map<String, dynamic> toJson() => {
        'name': name,
        'duration': duration,
        'date': date,
      };
}

Firestore Database를 초기화하고 참조를 가져옵니다.

import 'package:firebase_database/firebase_database.dart';

final database = FirebaseDatabase.instance.reference();

운동 데이터를 추가하는 함수를 작성합니다.

void addExercise(Exercise exercise) {
  database.child('exercises').push().set(exercise.toJson());
}

운동 데이터를 불러오는 함수를 작성합니다.

Stream<List<Exercise>> getExercises() {
  return database.child('exercises').onValue.map((event) {
    final exercises = <Exercise>[];
    if (event.snapshot.value != null) {
      final exercisesMap = Map<String, dynamic>.from(event.snapshot.value);
      exercisesMap.forEach((key, value) {
        final exercise = Exercise(
          name: value['name'],
          duration: value['duration'],
          date: value['date'],
        );
        exercises.add(exercise);
      });
    }
    return exercises;
  });
}

애플리케이션 UI 구성하기

main.dart 파일에서 화면을 구성합니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '운동일지 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExerciseListScreen(),
    );
  }
}

class ExerciseListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('운동일지'),
      ),
      body: StreamBuilder<List<Exercise>>(
        stream: getExercises(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final exercises = snapshot.data!;
            return ListView.builder(
              itemCount: exercises.length,
              itemBuilder: (context, index) {
                final exercise = exercises[index];
                return ListTile(
                  title: Text(exercise.name),
                  subtitle: Text('날짜 : ${exercise.date}, 소요 시간 : ${exercise.duration}분'),
                );
              },
            );
          } else {
            return CircularProgressIndicator();
          }
        },
      ),
    );
  }
}

앱을 빌드하고 실행합니다.

flutter run

이제 Firebase Database와 플러터를 이용한 운동일지 애플리케이션이 성공적으로 만들어졌습니다. 사용자는 앱에서 운동 관련 데이터를 기록하고 저장할 수 있으며, 기록한 데이터는 Firebase Database에 실시간으로 저장됩니다.

Firebase 프로젝트 설정하기

플러터(Flutter) 프로젝트 설정하기

Firebase Database 사용하기

애플리케이션 UI 구성하기

참고 자료