Flutter Firebase FCM

Flutter와 Firebase를 사용하여 Firebase Cloud Messaging(FCM)을 구현하는 예제를 단계별로 설명하겠습니다. 이 예제는 간단한 푸시 알림을 Flutter 앱으로 보내는 과정을 다룹니다.

---

1. 프로젝트 설정

Firebase 콘솔에서 프로젝트 생성

1. Firebase Console로 이동하여 새 프로젝트를 생성합니다.
2. Firebase 프로젝트에 앱을 추가합니다(예: Android 또는 iOS).
3. 앱의 Google Services 파일을 다운로드:
   • Android: google-services.json 파일을 다운로드하여 android/app/ 디렉토리에 추가합니다.
   • iOS: GoogleService-Info.plist 파일을 다운로드하여 프로젝트의 iOS 디렉토리에 추가합니다.

Android 앱 설정

1. android/build.gradle 파일에 다음을 추가: dependencies { classpath 'com.google.gms:google-services:4.3.15' // 최신 버전 확인 }
2. android/app/build.gradle 파일에 다음을 추가: apply plugin: 'com.google.gms.google-services' dependencies { implementation 'com.google.firebase:firebase-messaging:24.2.0' // 최신 버전 확인 }

iOS 앱 설정

1. iOS 프로젝트에서 Podfile을 열고 Firebase 메시징 관련 의존성을 추가: pod 'Firebase/Messaging'
2. Runner의 AppDelegate.swift 파일에 FCM 초기화를 추가합니다.

---

2. Flutter 프로젝트 설정

Firebase 플러그인 설치

pubspec.yaml 파일에 다음 의존성을 추가:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.16.0 # 최신 버전 확인
  firebase_messaging: ^14.7.1 # 최신 버전 확인

그 후, 의존성을 설치합니다:

flutter pub get

Firebase 초기화

main.dart 파일에서 Firebase를 초기화합니다:

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

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  print("Handling a background message: ${message.messageId}");
}

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

  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MessagingExampleApp(),
    );
  }
}

---

3. Firebase Messaging 구현

토큰 가져오기

사용자의 FCM 토큰을 가져와 서버와 연동합니다:

class MessagingExampleApp extends StatefulWidget {
  @override
  _MessagingExampleAppState createState() => _MessagingExampleAppState();
}

class _MessagingExampleAppState extends State<MessagingExampleApp> {
  String? _token;

  @override
  void initState() {
    super.initState();
    _getToken();
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Received a message: ${message.notification?.title}');
    });
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('Opened app from message: ${message.notification?.body}');
    });
  }

  Future<void> _getToken() async {
    FirebaseMessaging messaging = FirebaseMessaging.instance;
    String? token = await messaging.getToken();
    print("FCM Token: $token");
    setState(() {
      _token = token;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FCM Example')),
      body: Center(
        child: Text(_token != null ? 'Token: $_token' : 'Fetching token...'),
      ),
    );
  }
}

---

4. Firebase 콘솔에서 알림 테스트

1. Firebase 콘솔에서 Cloud Messaging을 선택합니다.
2. 새 메시지를 생성합니다.
3. 앱의 토큰을 복사하여 수신자 지정란에 입력합니다.
4. 메시지 제목과 본문을 작성하고 보내기를 클릭합니다.

---

5. 추가 설정

알림 권한 요청 (iOS)

iOS에서 알림 권한을 요청하려면 Info.plist에 다음을 추가합니다:

<key>FirebaseAppDelegateProxyEnabled</key>
<false/>
<key>UIBackgroundModes</key>
<array>
    <string>fetch</string>
    <string>remote-notification</string>
</array>

Flutter 코드에서 권한을 요청:

await FirebaseMessaging.instance.requestPermission(
  alert: true,
  announcement: false,
  badge: true,
  carPlay: false,
  criticalAlert: false,
  provisional: false,
  sound: true,
);

---

6. 테스트 및 디버깅

• Android 디바이스에서 푸시 알림을 받으려면 앱이 백그라운드 상태에서도 실행 가능해야 합니다.
• iOS에서 디버깅할 때 실제 기기에서 테스트해야 알림이 작동합니다.

---

이제 Firebase Cloud Messaging을 통해 Flutter 앱에서 푸시 알림을 받을 수 있습니다!