Flutter Firebase

Flutter Firebase Firestore 연동

Firebase Firestore는 클라우드 기반의 NoSQL 데이터베이스로, Flutter 앱에서 실시간 데이터베이스 기능을 쉽게 구현할 수 있습니다. Firestore와 Flutter를 연동하는 방법을 단계별로 설명하겠습니다.

1. Firebase 설정

Firebase 프로젝트 생성

1. Firebase Console에 로그인합니다.
2. 새 프로젝트를 생성합니다.

Firebase 구성 파일 다운로드

1. 프로젝트 설정으로 이동합니다.
2. Android 앱을 추가하고 패키지 이름을 입력합니다.
3. google-services.json 파일을 다운로드하여 android/app 폴더에 넣습니다.
4. iOS 앱을 추가하고 패키지 이름을 입력합니다.
5. GoogleService-Info.plist 파일을 다운로드하여 ios/Runner 폴더에 넣습니다.

2. Flutter 프로젝트 설정

Firebase 패키지 추가

pubspec.yaml 파일에 Firebase 및 Firestore 관련 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.1.0
  cloud_firestore: ^4.1.0

Android 설정

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

buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.3.10'
    }
}

android/app/build.gradle 파일의 맨 아래에 다음 내용을 추가합니다.

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

iOS 설정

ios/Runner/Info.plist 파일에 Firebase 설정을 추가합니다.

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>YOUR_REVERSED_CLIENT_ID</string>
        </array>
    </dict>
</array>
<key>GoogleService-Info</key>
<dict>
    <!-- Add this line -->
</dict>

ios/Podfile 파일을 업데이트하여 플랫폼 버전을 설정합니다.

platform :ios, '10.0'

3. Firestore 연동 코드 작성

Firebase 초기화

main.dart 파일에서 Firebase를 초기화합니다.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

Firestore 데이터 읽기 및 쓰기

Firestore 데이터베이스에서 데이터를 읽고 쓰는 예제를 보겠습니다.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final TextEditingController _controller = TextEditingController();
  final CollectionReference _itemsCollection = FirebaseFirestore.instance.collection('items');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Firestore Example'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Enter item'),
            ),
          ),
          ElevatedButton(
            onPressed: _addItem,
            child: Text('Add Item'),
          ),
          Expanded(
            child: StreamBuilder(
              stream: _itemsCollection.snapshots(),
              builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }
                if (snapshot.hasError) {
                  return Center(child: Text('Error: ${snapshot.error}'));
                }

                final items = snapshot.data!.docs;

                return ListView.builder(
                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(items[index]['name']),
                      trailing: IconButton(
                        icon: Icon(Icons.delete),
                        onPressed: () => _deleteItem(items[index].id),
                      ),
                    );
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Future<void> _addItem() async {
    if (_controller.text.isNotEmpty) {
      await _itemsCollection.add({'name': _controller.text});
      _controller.clear();
    }
  }

  Future<void> _deleteItem(String id) async {
    await _itemsCollection.doc(id).delete();
  }
}

요약

1. Firebase 설정: Firebase 콘솔에서 프로젝트를 생성하고 구성 파일을 다운로드합니다.
2. Flutter 프로젝트 설정: Firebase와 Firestore 패키지를 추가하고 Android 및 iOS 설정을 완료합니다.
3. Firestore 연동 코드 작성: Firebase 초기화, Firestore 데이터 읽기 및 쓰기 기능을 구현합니다.

이렇게 하면 Flutter 앱에서 Firebase Firestore를 사용하여 데이터를 실시간으로 읽고 쓸 수 있습니다. Firestore를 사용하면 데이터베이스 동기화 및 관리가 용이해져 실시간 애플리케이션을 쉽게 개발할 수 있습니다.