Flutter의 Firestore 사용법

Firestore는 Firebase의 NoSQL 클라우드 데이터베이스로, 실시간 데이터베이스 기능을 제공합니다. Flutter에서 Firestore를 사용하면 애플리케이션의 데이터를 실시간으로 저장하고 동기화할 수 있습니다. 이번 글에서는 Flutter에서 Firestore를 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Firestore 설정

Firestore를 사용하기 위해서는 먼저 Firebase 프로젝트를 설정해야 합니다. Firebase 프로젝트를 설정하는 방법은 다음과 같습니다:

1. Firebase 콘솔에 접속하여 새 프로젝트를 생성합니다.
2. Android 및 iOS 애플리케이션을 Firebase 프로젝트에 추가합니다.
3. Firestore를 설정하고 보안 규칙을 구성합니다.

2. Firestore 플러그인 설치

Firestore를 Flutter 프로젝트에 통합하려면 cloud_firestore 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.3.0
  cloud_firestore: ^5.2.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

3. Firestore 초기화

Firestore를 사용하려면 애플리케이션을 초기화해야 합니다. main.dart 파일에서 Firebase와 Firestore를 초기화합니다.

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

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

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firestore Example')),
      body: Center(
        child: Text('Welcome to Firestore!'),
      ),
    );
  }
}

 

위 코드는 Firebase와 Firestore를 초기화하고 기본 홈 화면을 설정합니다.

4. Firestore 데이터 읽기 및 쓰기

Firestore에서 데이터를 읽고 쓰는 방법을 알아보겠습니다.

 

데이터 쓰기

Firestore에 데이터를 쓰려면 add 메서드나 set 메서드를 사용합니다. 다음은 Firestore에 메시지를 추가하는 예제입니다.

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

class FirestoreScreen extends StatefulWidget {
  @override
  _FirestoreScreenState createState() => _FirestoreScreenState();
}

class _FirestoreScreenState extends State<FirestoreScreen> {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;
  final TextEditingController _controller = TextEditingController();
  String responseMessage = '';

  Future<void> _addMessage() async {
    if (_controller.text.isNotEmpty) {
      try {
        await _firestore.collection('messages').add({'text': _controller.text});
        setState(() {
          responseMessage = 'Message added successfully';
        });
      } catch (e) {
        setState(() {
          responseMessage = 'Failed to add message: $e';
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firestore Add Message')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Enter message'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _addMessage,
              child: Text('Add Message'),
            ),
            SizedBox(height: 20),
            Text(responseMessage),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 사용자가 입력한 메시지를 Firestore의 messages 컬렉션에 추가하는 예제입니다. add 메서드를 사용하여 새로운 문서를 컬렉션에 추가합니다.

 

 

반응형

 

 

데이터 읽기

Firestore에서 데이터를 읽으려면 get 메서드나 snapshots 메서드를 사용합니다. 다음은 Firestore에서 메시지를 읽어오는 예제입니다.

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

class FirestoreListScreen extends StatefulWidget {
  @override
  _FirestoreListScreenState createState() => _FirestoreListScreenState();
}

class _FirestoreListScreenState extends State<FirestoreListScreen> {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;
  List<String> messages = [];

  @override
  void initState() {
    super.initState();
    _fetchMessages();
  }

  Future<void> _fetchMessages() async {
    try {
      final QuerySnapshot result = await _firestore.collection('messages').get();
      final List<DocumentSnapshot> documents = result.docs;
      setState(() {
        messages = documents.map((doc) => doc['text'] as String).toList();
      });
    } catch (e) {
      setState(() {
        messages = ['Failed to fetch messages: $e'];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firestore Message List')),
      body: ListView.builder(
        itemCount: messages.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(messages[index]),
          );
        },
      ),
    );
  }
}

 

위 코드는 Firestore의 messages 컬렉션에서 메시지를 읽어와 리스트로 표시하는 예제입니다. get 메서드를 사용하여 컬렉션의 모든 문서를 가져오고, ListView.builder 위젯을 사용하여 리스트를 화면에 표시합니다.

5. 실시간 데이터 업데이트

Firestore는 실시간 데이터베이스 기능을 제공하여 데이터가 변경될 때 자동으로 UI를 업데이트할 수 있습니다. 이를 위해 snapshots 메서드를 사용합니다.

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

class FirestoreRealTimeListScreen extends StatefulWidget {
  @override
  _FirestoreRealTimeListScreenState createState() => _FirestoreRealTimeListScreenState();
}

class _FirestoreRealTimeListScreenState extends State<FirestoreRealTimeListScreen> {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firestore Real-Time List')),
      body: StreamBuilder<QuerySnapshot>(
        stream: _firestore.collection('messages').snapshots(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          }

          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }

          final data = snapshot.requireData;
          return ListView.builder(
            itemCount: data.size,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(data.docs[index]['text']),
              );
            },
          );
        },
      ),
    );
  }
}

 

위 코드는 Firestore의 messages 컬렉션에서 실시간으로 데이터를 읽어와 리스트로 표시하는 예제입니다. snapshots 메서드를 사용하여 데이터베이스의 변경 사항을 스트림으로 구독하고, 데이터가 변경될 때마다 자동으로 UI를 업데이트합니다.

결론

Firestore는 Flutter 애플리케이션에서 실시간 데이터베이스 기능을 제공하여 데이터를 쉽게 저장하고 동기화할 수 있습니다. Firestore를 사용하여 데이터를 읽고 쓰는 방법과 실시간 데이터 업데이트 기능을 활용하여 애플리케이션을 더욱 강력하게 만들 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 Firestore를 효율적으로 사용해보세요. Firestore를 통해 애플리케이션의 기능을 확장하고, 사용자 경험을 향상시킬 수 있습니다.