Flutter에서 푸시 알림 기능을 구현하려면 다양한 방법이 있습니다. 이 중에서 Riverpod를 사용하는 방법을 알아보겠습니다. Riverpod는 Flutter의 상태 관리 패키지 중 하나로, 앱 전역에서 상태를 관리할 수 있도록 도와줍니다.

1. FCM 설정

푸시 알림을 구현하기 위해서는 먼저 Firebase Cloud Messaging(FCM)을 설정해야 합니다. Firebase 콘솔에서 프로젝트를 생성하고, FCM을 활성화시킨 후, 앱을 등록하세요. 등록한 앱의 google-services.json 파일을 프로젝트에 추가해야 합니다. 또한, AndroidManifest.xml 파일과 AppDelegate.swift(iOS) 파일을 수정해 FCM과 통신할 수 있도록 설정합니다.

2. Riverpod 패키지 추가

프로젝트의 pubspec.yaml 파일에 다음 코드를 추가하여 Riverpod 패키지를 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0

3. FCM 메시지 처리

FCM으로부터 받은 메시지를 처리하기 위해 firebase_messaging 패키지를 사용합니다. 해당 패키지를 pubspec.yaml에 추가하세요.

dependencies:
  firebase_messaging: ^11.0.0

4. Provider 설정

앱 전역에서 FCM 메시지 상태를 관리할 Riverpod Provider를 설정합니다. main.dart 파일을 열고 다음 코드를 추가합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

final fcmProvider = Provider<FirebaseMessaging>((ref) {
  final fcm = FirebaseMessaging.instance;
  fcm.requestPermission(alert: true, badge: true, sound: true);
  return fcm;
});

5. MainActivity/FlutterActivity 설정 (Android)

앱이 백그라운드 상태일 때도 푸시 알림을 수신할 수 있도록 MainActivity.kt 파일을 엽니다. 다음 코드를 추가합니다.

override fun onResume() {
  super.onResume()
  val notificationManager = getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
  notificationManager.cancelAll()
}

6. FirebaseMessagingListenerService 설정 (Android)

FirebaseMessagingListenerService를 생성하여 푸시 알림을 처리합니다. 다음 코드를 MainActivity.kt 파일과 같은 패키지에 추가합니다.

class MyFirebaseMessagingListenerService : FirebaseMessagingService() {
    override fun onMessageReceived(remoteMessage: RemoteMessage) {
        super.onMessageReceived(remoteMessage)
      
        // 푸시 알림 처리 로직 작성
    }
}

7. AppDelegate 설정 (iOS)

AppDelegate.swift 파일에 다음 코드를 추가하여 백그라운드에서 푸시 알림을 처리합니다.

import FirebaseMessaging

extension AppDelegate: UNUserNotificationCenterDelegate, MessagingDelegate {
    func messaging(_ messaging: Messaging, didReceive remoteMessage: MessagingRemoteMessage) {
        // 푸시 알림 처리 로직 작성
    }
}

8. 푸시 알림 처리

FCM으로부터 받은 푸시 알림을 처리하는 로직을 추가하세요. 이때, fcmProvider를 사용하여 Riverpod Provider를 주입합니다. 다음은 예시입니다.

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final fcm = watch(fcmProvider);

    useEffect(() {
      fcm.setForegroundNotificationPresentationOptions(
          alert: true, badge: true, sound: true);
      FirebaseMessaging.onMessage.listen((RemoteMessage message) {
        // 푸시 알림 처리 로직 작성
      });
      return null;
    }, []);

    // 위젯 빌드 및 나머지 코드 작성
  }
}

이제 Riverpod를 사용하여 앱에 푸시 알림 기능을 추가하는 방법을 알게 되었습니다. Firebase 설정과 푸시 알림 처리 로직을 구현한 후, 앱을 빌드하여 테스트해보세요.

참고 자료

• Riverpod
• Firebase Cloud Messaging