[flutter] - Flutter로 실시간 채팅 앱 만들기

안녕하세요! 이번에는 Flutter를 사용하여 실시간 채팅 앱을 만드는 방법에 대해 알아보겠습니다. Flutter는 모바일 애플리케이션 개발을 위한 UI 프레임워크로서, 빠른 개발과 화면 구성의 유연성을 제공합니다. 그리고 Firebase를 이용하여 실시간 데이터베이스와 인증 시스템을 구현할 것입니다.

1. Firebase 프로젝트 설정

먼저, Firebase 콘솔에 접속하여 프로젝트를 생성해야 합니다. 생성이 완료되면, 프로젝트의 설정에서 Flutter 앱을 추가하고, 다운로드한 google-services.json 파일을 프로젝트의 android/app 디렉토리에 추가합니다.

2. Flutter 프로젝트 설정

Flutter SDK가 설치되어 있어야 합니다. Flutter SDK가 설치되지 않았다면, Flutter 웹사이트에서 다운로드하고 설정하는 방법을 확인할 수 있습니다.

새로운 Flutter 프로젝트를 생성하고, pubspec.yaml 파일에서 다음과 같은 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.6.0
  firebase_auth: ^3.1.0
  cloud_firestore: ^2.5.0

프로젝트의 루트 디렉토리에서 flutter pub get 명령어를 실행하여 의존성을 설치합니다.

3. Firebase 인증 시스템 구현

Firebase 인증 시스템을 사용하여 사용자 인증을 구현해보겠습니다. main.dart 파일에서 다음 코드를 추가합니다:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chat App',
      home: FirebaseAuth.instance.currentUser != null
          ? ChatScreen()
          : SignInScreen(),
    );
  }
}

class SignInScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sign In'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Sign In with Google'),
          onPressed: () {
            // Google 로그인 구현
          },
        ),
      ),
    );
  }
}

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: Container(
        child: Text('Chat screen'),
      ),
    );
  }
}

해당 코드는 Firebase 초기화 후 사용자가 이미 인증되어 있는지 확인하고, 인증되어 있지 않다면 로그인 화면을 보여줍니다.

4. 실시간 채팅 구현

ChatScreen 위젯을 수정하여 실시간 채팅을 구현해보겠습니다. cloud_firestore 패키지를 사용하여 Firestore 데이터베이스에 채팅 메시지를 저장하고 표시할 수 있습니다.

import 'package:cloud_firestore/cloud_firestore.dart';

class ChatScreen extends StatelessWidget {
  final TextEditingController _messageController = TextEditingController();
  final CollectionReference _messagesCollection =
      FirebaseFirestore.instance.collection('messages');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat'),
      ),
      body: Column(
        children: [
          Expanded(
            child: StreamBuilder<QuerySnapshot>(
              stream: _messagesCollection.orderBy('timestamp').snapshots(),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return ListView.builder(
                    itemCount: snapshot.data!.docs.length,
                    itemBuilder: (context, index) {
                      DocumentSnapshot message = snapshot.data!.docs[index];
                      return ListTile(
                        title: Text(message.data()['text']),
                      );
                    },
                  );
                } else {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                }
              },
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextFormField(
                    controller: _messageController,
                    decoration: InputDecoration(
                      hintText: 'Enter a message',
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    _sendMessage();
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  void _sendMessage() {
    String messageText = _messageController.text;

    if (messageText.isNotEmpty) {
      _messagesCollection.add({
        'text': messageText,
        'timestamp': FieldValue.serverTimestamp(),
      });

      _messageController.clear();
    }
  }
}

위 코드에서는 Firestore 컬렉션인 messages에서 메시지 데이터를 스트리밍하고, ListView.builder를 사용하여 메시지를 화면에 표시합니다. 또한, TextFormField와 IconButton을 사용하여 새로운 메시지를 작성하고 전송할 수 있도록 구현했습니다.

이제 Flutter로 실시간 채팅 앱을 만드는 방법에 대해 알아보았습니다. Firebase를 사용하여 인증 시스템과 실시간 데이터베이스를 구축하고, Flutter를 사용하여 UI를 만들었습니다. 이를 기반으로 더 많은 기능을 추가하고 사용자 경험을 향상시킬 수 있습니다.

참고 자료: