(Advanced) Client SDK - Flutter

1. 푸시 알림 아이콘 설정 (Android)

Notifly Flutter Plugin에서는 푸시를 수신할 때 기본적으로 앱 기본 아이콘을 푸시 알림 아이콘으로 사용합니다.

만약 앱 기본 아이콘과 다른 아이콘을 푸시 알림 아이콘으로 사용하고 싶은 경우, ic_stat_notifly_default 의 이름으로 notification icon을 만들어 주세요. notification icon을 만드는 가이드는 Android Developers - Create app icons를 참고해 주세요.

2. 푸시 알림 사전 동의

Notifly Flutter Plugin에서는 푸시 알림을 수신하는 시점에 사용자에게 푸시 알림 수신 동의를 받지 않습니다. 사용자 알림 수신 동의는 Notifly Flutter Plugin 설치와 무관하게 앱 내에서 직접 구현하셔야 합니다.

Flutter 프로젝트에서 FirebaseMessaging 을 사용하고 계신 경우, requestPermission API (예시) 룰 사용해서 권한 요청을 할 수 있습니다.

3. 푸시 알림 클릭 이벤트 구독

SDK 버전

해당 기능은 Notifly Flutter SDK 1.4.0 이상 버전부터 지원됩니다.

지원되는 플랫폼

해당 기능은 Android 플랫폼에서만 지원됩니다.

iOS 플랫폼의 경우, Firebase Messaging SDK를 사용하여 푸시 알림 클릭 이벤트를 구독하실 수 있습니다. Firebase Messaging SDK - Handling messages를 참고해 주세요.

Notifly Flutter SDK에서는 푸시 알림 클릭 이벤트를 구독하여 사용자가 푸시 알림을 클릭했을 때 앱 내에서 특정 동작을 수행하도록 커스터마이즈 할 수 있습니다. 아래 예시는 Go Router 라이브러리를 사용하여 푸시 알림 클릭 이벤트를 구독하고, 푸시 알림 클릭 시 특정 페이지로 이동하는 예시입니다.

main.dart

import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:go_router/go_router.dart';
import 'package:notifly_flutter/notifly_flutter.dart';
import 'package:notifly_flutter_example/src/DetailPage.dart';
import 'package:notifly_flutter_example/src/HomePage.dart';

void main() async {
  await dotenv.load();
  runApp(const MyApp());
}

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/:id',
      builder: (context, state) {
        final pathId = state.pathParameters['id']!;
        return DetailPage(id: pathId);
      },
    )
  ],
);

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Future<void> initNotifly() async {
    WidgetsFlutterBinding.ensureInitialized();

    await NotiflyPlugin.initialize(
      projectId: dotenv.env['NOTIFLY_PROJECT_ID']!,
      username: dotenv.env['NOTIFLY_USERNAME']!,
      password: dotenv.env['NOTIFLY_PASSWORD']!,
    );

    print('🔥 [Flutter] NotiflyPlugin initialized');

    if (!kIsWeb && Platform.isAndroid) {
      await NotiflyPlugin.addNotificationClickListener((event) {
        final customData = event.notification.customData;
        if (customData != null) {
          final routeId = customData['routeId'];
          if (routeId != null) {
            router.go('/$routeId');
          }
        }
      });
    }
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
    initNotifly();
  }
}

3-1. 푸시 알림 클릭 이벤트 인터페이스

OSNotificationClickEvent 의 notification 멤버에 접근하여, 사용자가 클릭한 푸시에 대한 정보를 확인할 수 있습니다.

notification.dart

/// Callback for handling received notifications.
typedef NotificationClickListener = void Function(
  OSNotificationClickEvent event,
);

/// Represents a notification received from the Notifly service.
enum OSNotificationImportance {
  /// The notification is of low importance.
  low,

  /// The notification is of normal importance.
  normal,

  /// The notification is of high importance.
  high,
}

/// Represents a notification received from the Notifly service.
class OSNotification extends JSONStringRepresentable {
  /// The Notifly message ID of the notification.
  String? notiflyMessageId;

  /// (Only Android) The Android system notification ID of the notification.
  int? androidNotificationId;

  /// Notifly campaign ID where the notification was sent from.
  String? campaignId;

  /// Notification title
  String? title;

  /// Notification body
  String? body;

  /// (Only Android) Importance of the notification.
  OSNotificationImportance? importance;

  /// URL included in the notification.
  String? url;

  /// URL to the image included in the notification.
  String? imageUrl;

  /// Sent time of the notification in milliseconds since epoch
  int? sentTime;

  /// TTL of the notification in seconds
  int? ttl;

  /// Customized data included in the notification.
  Map<String, dynamic>? customData;

  /// Raw payload of the notification.
  Map<String, dynamic>? rawPayload;
}

/// Represents a notification click event.
class OSNotificationClickEvent {
  OSNotification notification;
}

Property name	Type	Description	Since
androidNotificationId	int?	Android system-level 푸시 알림 ID입니다.	1.4.0
campaignId	String?	푸시 알림이 발송된 Notifly 캠페인의 ID입니다.	1.4.0
body	String?	푸시 메시지의 내용입니다.	1.4.0
title	String?	푸시 메시지의 제목입니다.	1.4.0
url	String?	푸시 메시지가 클릭되었을 때 이동할 URL입니다. 만약 '앱 실행' 액션으로 푸시 알림을 발송하였다면, null 값이 반환됩니다.	1.4.0
customData	Map<String, dynamic>?	FCM 푸시 메시지의 data 필드에 포함된 키-값 쌍의 커스텀 데이터입니다. 노티플라이 콘솔에서 설정할 수 있습니다.	1.4.0
imageUrl	String?	이미지형 푸시 메시지에 포함된 이미지 URL 입니다.	1.4.0
importance	Importance	Importance.high, Importance.normal, Importance.low 중 하나의 값입니다.	1.4.0
notiflyMessageId	String?	Notifly 서버에서 임의로 생성한 메시지 ID입니다.	1.4.0
rawPayload	Map<String, dynamic>?	FCM data의 가공되지 않은 payload입니다. JSON을 stringify한 형태로 반환됩니다.	1.4.0
sentTime	int?	FCM 서버에서 푸시 알림을 발송한 시간입니다.	1.4.0
ttl	int?	푸시 알림의 TTL(Time To Live) 값입니다.	1.4.0