[flutter] 플러터 앱의 실시간 채팅 (Real-time Chat) 구현

플러터(Flutter)를 사용하여 실시간 채팅 앱을 구현하는 방법을 알아보겠습니다.

1. 개요

실시간 채팅은 사용자들이 실시간으로 메시지를 주고받을 수 있는 기능을 제공하는 앱입니다. 이번 예제에서는 Firebase Firestore를 사용하여 실시간 채팅을 구현할 것입니다. Firestore는 NoSQL 기반의 클라우드 데이터베이스로, 실시간 업데이트를 지원하여 실시간 채팅에 적합한 기술입니다.

2. 준비

프로젝트에 Firebase를 추가하고 Firestore를 활성화해야 합니다. 이를 위해 다음 단계를 따르세요:

  1. Firebase 콘솔에 접속합니다.
  2. 새 프로젝트를 생성하거나 기존 프로젝트를 선택합니다.
  3. 프로젝트 설정으로 이동하여 Firestore를 활성화합니다.
  4. Flutter 프로젝트에 Firebase Flutter 플러그인을 추가합니다.

3. Firebase 연결

Firebase와 Flutter 앱을 연결하기 위해 다음 단계를 수행하세요:

  1. pubspec.yaml 파일에 cloud_firestore dependency를 추가합니다.
    dependencies:
      flutter:
     sdk: flutter
      cloud_firestore: ^2.3.0
    
  2. Flutter 앱에서 Firebase를 초기화합니다. main.dart 파일에 다음 코드를 추가하세요. ```dart import ‘package:firebase_core/firebase_core.dart’;

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


## 4. 채팅 화면 구현

채팅 화면을 구현하기 위해 다음과 같은 위젯을 만들어야 합니다.

1. 메시지 목록을 표시하는 위젯
2. 새 메시지를 입력하는 위젯

```dart
class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat App'),
      ),
      body: Column(
        children: [
          Expanded(
            child: MessagesList(),
          ),
          NewMessage(),
        ],
      ),
    );
  }
}

class MessagesList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<DocumentSnapshot>(
      stream: FirebaseFirestore.instance
          .collection('messages')
          .doc('chatroomId')
          .snapshots(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          var messages = snapshot.data.data()['messages'];
          return ListView.builder(
            itemCount: messages.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(messages[index]),
              );
            },
          );
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

class NewMessage extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  void _sendMessage() {
    FirebaseFirestore.instance
        .collection('messages')
        .doc('chatroomId')
        .update({
      'messages': FieldValue.arrayUnion([_controller.text]),
    });

    _controller.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      child: Row(
        children: [
          Expanded(
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: '메시지 입력',
              ),
            ),
          ),
          ElevatedButton(
            onPressed: _sendMessage,
            child: Text('전송'),
          ),
        ],
      ),
    );
  }
}

위젯은 Firebase Firestore를 사용하여 메시지 목록을 읽고 새 메시지를 전송합니다. MessagesList 위젯은 Firestore의 데이터 변경을 실시간으로 감지하고 ListView로 메시지를 표시합니다. NewMessage 위젯은 새 메시지를 입력받고 Firestore에 전송하는 역할을 담당합니다.

5. 실행

앱을 실행하여 실시간 채팅 기능을 확인해보세요. Firebase Firestore를 사용하므로 여러 사용자가 동시에 채팅에 참여할 수 있습니다.