[flutter] 플러터 앱의 원격 알림 (Push Notification) 처리

플러터는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동일한 코드로 네이티브 앱을 개발할 수 있습니다. 이번에는 플러터 앱에서 원격 알림, 즉 Push Notification을 처리하는 방법에 대해 알아보겠습니다.

1. Firebase 설정

플러터 앱에서는 Firebase를 사용하여 푸시 알림을 처리할 수 있습니다. 먼저 Firebase 프로젝트를 생성하고, 앱을 추가해야 합니다. Firebase 콘솔에서 ‘프로젝트 추가’를 선택하고, Android 또는 iOS 앱을 추가해주면 됩니다.

안드로이드 앱을 추가하는 경우, google-services.json 파일을 다운로드하고, 플러터 프로젝트의 android/app 디렉토리에 해당 파일을 복사해야 합니다. iOS 앱을 추가하는 경우, GoogleService-Info.plist 파일을 다운로드하고, Xcode 프로젝트에 해당 파일을 추가해야 합니다.

2. 플러그인 설치

Firebase를 사용하기 위해서는 플러그인을 설치해야 합니다. flutter_local_notifications 플러그인은 알림을 표시하기 위해 사용됩니다. firebase_messaging 플러그인은 Firebase Cloud Messaging (FCM)을 사용하여 푸시 알림을 처리하기 위해 사용됩니다.

pubspec.yaml 파일에 다음과 같이 플러그인을 추가해주세요:

dependencies:
  flutter_local_notifications: ^5.3.0
  firebase_messaging: ^10.0.0

플러그인을 추가한 후에는 flutter pub get 명령을 통해 의존성을 업데이트 해주어야 합니다.

3. FCM 설정

Firebase 콘솔에서 ‘프로젝트 설정’ -> ‘클라우드 메시징’ 탭으로 이동합니다. ‘클라우드 메시징’에서 알림을 사용하도록 설정하고, 필요한 경우 추가 구성을 수행합니다. 예를 들어, 원격 데이터 메시지를 사용하려면 ‘고급 옵션’에서 해당 옵션을 활성화해야 합니다.

4. 푸시 알림 처리

이제 앱 안에서 푸시 알림을 처리할 준비가 되었습니다. 먼저, main.dart 파일에 다음과 같이 플러그인을 초기화하는 코드를 추가합니다:

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

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();
final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;

void main() async {
  // 플러그인 초기화
  WidgetsFlutterBinding.ensureInitialized();
  await initNotifications();
  
  runApp(MyApp());
}

Future<void> initNotifications() async {
  const AndroidInitializationSettings initializationSettingsAndroid =
      AndroidInitializationSettings('app_icon');
  final InitializationSettings initializationSettings =
      InitializationSettings(android: initializationSettingsAndroid);
  await flutterLocalNotificationsPlugin.initialize(
    initializationSettings,
  );

  // Firebase 푸시 알림 핸들러 등록
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    // 알림 콘텐츠 파싱 및 처리
    final notification = message.notification;
    final data = message.data;

    // 알림을 표시할 코드 작성
  });
}

위 코드에서 app_icon은 Android 앱 아이콘의 리소스 이름입니다. 이 값을 본인의 앱 아이콘 리소스 이름으로 변경해주세요.

푸시 알림이 도착하면, FirebaseMessaging.onMessage 스트림을 통해 알림을 처리할 수 있습니다. 알림 콘텐츠는 message.notificationmessage.data에서 파싱할 수 있습니다. 해당 데이터를 사용하여 알림을 표시하는 코드를 작성하면 됩니다.

5. 알림 표시

푸시 알림을 수신하면, flutter_local_notifications 플러그인을 사용하여 알림을 표시할 수 있습니다. 다음은 간단한 예시입니다:

void showNotification(RemoteNotification notification) async {
  const AndroidNotificationDetails androidPlatformChannelSpecifics =
      AndroidNotificationDetails(
    'channel_id',
    'channel_name',
    'channel_description',
    importance: Importance.max,
    priority: Priority.high,
    showWhen: false,
  );
  const NotificationDetails platformChannelSpecifics =
      NotificationDetails(android: androidPlatformChannelSpecifics);

  await flutterLocalNotificationsPlugin.show(
    0,
    notification.title,
    notification.body,
    platformChannelSpecifics,
  );
}

위 코드에서 channel_id, channel_name, channel_description은 알림 채널에 대한 식별자와 정보입니다. 사용자에게 알림을 표시하기 전에 알림 채널을 생성해야 합니다.

푸시 알림이 도착하면, showNotification 함수를 호출하여 알림을 표시할 수 있습니다.

마무리

위와 같이 플러터에서 푸시 알림을 처리하는 방법을 알아보았습니다. Firebase를 사용하여 알림을 보내고, flutter_local_notifications 플러그인을 사용하여 푸시 알림을 표시할 수 있습니다.

더 자세한 내용은 다음 문서를 참고하시기 바랍니다: