[flutter] 플러터 Riverpod를 사용하여 앱에 실시간 채팅 기능을 추가하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

플러터는 Google에서 개발한 UI 프레임워크로, 여러 플랫폼에서 동작하는 앱을 만들 수 있습니다. Riverpod는 플러터의 상태 관리를 단순화하는 패키지로, 앱의 다양한 상태를 효과적으로 관리할 수 있습니다. 이번 글에서는 Riverpod를 사용하여 앱에 실시간 채팅 기능을 추가하는 방법을 알아보겠습니다.

1. Firebase 프로젝트 설정

실시간 채팅 기능을 구현하기 위해서는 Firebase 프로젝트를 설정해야 합니다. Firebase는 백엔드 서비스로 실시간 데이터베이스를 제공하며, 실시간 채팅 앱에 이상적입니다.

Firebase 콘솔(https://console.firebase.google.com)로 이동하여 프로젝트를 생성한 후, 앱에 Firebase를 추가해주세요. 그리고 Firebase 실시간 데이터베이스를 활성화하고 규칙 설정을 진행해주세요.

2. Flutter 프로젝트 설정

Flutter 프로젝트를 생성하고, 필요한 종속성을 설치해주세요. 이제 Riverpod를 사용할 수 있도록 pubspec.yaml 파일에 해당 종속성을 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0-dev.7

이제 종속성을 설치하기 위해 터미널에서 flutter pub get 명령을 실행해주세요.

3. Riverpod Provider 생성

실시간 채팅을 구현하기 위해 Riverpod Provider를 생성해야 합니다. chat_provider.dart라는 새로운 파일을 생성하고, 다음과 같은 코드를 작성해주세요.

import 'package:riverpod/riverpod.dart';

final chatProvider = Provider((ref) => ChatService());

class ChatService {
  // 채팅 로직 구현
}

위 코드에서는 chatProvider라는 이름의 Provider를 생성하고, 해당 Provider는 ChatService 클래스의 인스턴스를 생성합니다. ChatService 클래스는 채팅 로직을 구현하는 곳입니다.

4. Firebase 실시간 데이터베이스 연결

ChatService 클래스에서 Firebase 실시간 데이터베이스와 연결하여 채팅 기능을 구현할 수 있습니다. ChatService 클래스를 다음과 같이 수정해주세요.

import 'package:firebase_database/firebase_database.dart';

class ChatService {
  final _database = FirebaseDatabase.instance.reference();
  
  // 채팅 로직 구현
}

위 코드에서는 FirebaseDatabase.instance.reference()를 사용하여 Firebase 실시간 데이터베이스에 연결합니다.

5. 채팅 메시지 가져오기

실시간 채팅에서는 새로운 메시지가 도착할 때마다 UI를 업데이트해야 합니다. ChatService 클래스에 다음과 같은 메소드를 추가하여 채팅 메시지를 가져오는 로직을 구현해주세요.

Future<List<String>> getChatMessages() async {
  // Firebase 데이터베이스에서 채팅 메시지 가져오기
  final snapshot = await _database.child('chat_messages').once();
  final messages = Map.from(snapshot.value ?? {});

  return messages.values.cast<String>().toList();
}

위 코드에서는 getChatMessages 메소드를 사용하여 Firebase 데이터베이스에서 채팅 메시지를 가져옵니다.

6. UI 구현

이제 실시간 채팅을 보여줄 UI를 구현할 차례입니다. main.dart 파일을 열고, 다음과 같이 코드를 작성해주세요.

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

import 'chat_provider.dart';

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Chat App'),
        ),
        body: Center(
          child: Consumer(
            builder: (context, watch, child) {
              final chatService = watch(chatProvider);
              return FutureBuilder<List<String>>(
                future: chatService.getChatMessages(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    final messages = snapshot.data!;
                    // 실시간 채팅 UI 구현
                    return ListView.builder(
                      itemCount: messages.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text(messages[index]),
                        );
                      },
                    );
                  } else {
                    // 로딩 중 표시
                    return CircularProgressIndicator();
                  }
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

위 코드에서는 Consumer 위젯을 사용하여 chatProvider를 구독하고, getChatMessages 메소드를 사용하여 채팅 메시지를 가져옵니다. 그리고 FutureBuilder를 사용하여 데이터의 상태에 따라 UI를 업데이트합니다.

이제 플러터 앱을 실행하면 Firebase 실시간 데이터베이스에서 채팅 메시지를 가져와 UI에 표시되는 것을 확인할 수 있습니다.

이렇게 Riverpod를 사용하여 플러터 앱에 실시간 채팅 기능을 추가할 수 있습니다. Firebase 실시간 데이터베이스를 사용하여 채팅 메시지를 가져오고, Riverpod를 사용하여 상태 관리를 효과적으로 처리할 수 있습니다.

참고: Flutter, Riverpod, Firebase