Colin's Blog
[flutter] Firebase Firestore를 사용한 채팅 애플리케이션 만들기

Firebase Firestore를 사용하여 Flutter로 채팅 애플리케이션을 만들어보겠습니다. Firestore는 Firebase의 NoSQL 데이터베이스 서비스로 실시간 데이터 업데이트와 동기화를 제공합니다.

준비물

  1. Flutter 개발 환경이 설치되어 있어야 합니다.
  2. Firebase 프로젝트가 생성되어 있어야 합니다. (https://console.firebase.google.com)

프로젝트 설정

  1. Flutter 프로젝트를 생성하고 애플리케이션을 시작합니다.
  2. Firebase 프로젝트에 앱을 추가하고 Google Services 파일(google-services.json)을 다운로드합니다.
  3. Firebase 프로젝트와 Flutter 프로젝트를 연결하기 위해 android/app/build.gradle 파일의 dependencies에 다음 코드를 추가합니다:
implementation 'com.google.firebase:firebase-firestore:23.0.0'
  1. android/app/src/main/AndroidManifest.xml 파일에 인터넷 접속 권한을 추가합니다:
<uses-permission android:name="android.permission.INTERNET"/>
  1. iOS의 경우 AppDelegate.m 파일에 필요한 코드를 추가합니다:
@import Firebase;
[FIRApp configure];

Firebase Firestore 설정

  1. Firebase 콘솔에서 Firestore를 활성화합니다.
  2. Firestore에서 데이터베이스 컬렉션을 만듭니다. 예를 들어 messages라는 이름의 컬렉션을 생성합니다.
  3. 컬렉션에는 text, sender, timestamp와 같은 필드를 가진 문서를 추가합니다.

Flutter 앱 개발

  1. firebase_core와 cloud_firestore 패키지를 프로젝트에 추가합니다.
dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.0.2
  cloud_firestore: ^2.1.0
  1. main.dart 파일에서 Firebase와 Firestore를 초기화합니다.
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(ChatApp());
}
  1. 채팅 화면을 위한 UI 및 로직을 구현합니다. Firestore에서 데이터를 가져오고 보내기 위한 함수를 작성합니다.
class ChatScreen extends StatelessWidget {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat App'),
      ),
      body: StreamBuilder<QuerySnapshot>(
        stream: _firestore.collection('messages').orderBy('timestamp').snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          final messages = snapshot.data!.docs;
          return ListView.builder(
            itemCount: messages.length,
            itemBuilder: (context, index) {
              final message = messages[index];
              final text = message['text'];
              final sender = message['sender'];
              final time = message['timestamp'].toDate();
              return ListTile(
                title: Text(text),
                subtitle: Text('$sender - $time'),
              );
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _firestore.collection('messages').add({
            'text': 'Hello Flutter',
            'sender': 'User123',
            'timestamp': DateTime.now(),
          });
        },
        child: Icon(Icons.send),
      ),
    );
  }
}

class ChatApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatScreen(),
    );
  }
}
  1. 애플리케이션을 실행하고 Firebase Firestore에서 데이터를 확인 및 추가할 수 있습니다.

이제 Firebase Firestore를 활용하여 Flutter로 간단한 채팅 애플리케이션을 만들었습니다. Firestore의 실시간 업데이트를 통해 채팅 메시지를 실시간으로 표시하고 전송할 수 있습니다.

더 많은 기능과 UI를 추가하여 완전한 채팅 애플리케이션을 개발할 수 있습니다.

참고 자료

© 2018 Colin. All rights reserved.