Flutter에서 로컬 알림을 쉽게 다루는 flutter_local_notifications 패키지

2024. 6. 29. 03:20Flutter/Flutter Programming

반응형

모바일 앱 개발에서 사용자에게 중요한 정보를 전달하는 효과적인 방법 중 하나는 바로 알림입니다.

특히, 앱을 사용하지 않을 때에도 중요한 정보를 알려주거나, 미리 설정된 시간에 알림을 제공하는 경우 로컬 알림 기능이 필수적입니다.

Flutter에서 로컬 알림을 손쉽게 구현할 수 있도록 도와주는 강력한 패키지가 바로 flutter_local_notifications입니다. 이 패키지를 사용하면 다양한 종류의 알림을 간편하게 설정하고 관리할 수 있으며, 풍부한 기능을 통해 사용자 경험을 한 단계 더  사용 할 수 있습니다.

 

1. flutter_local_notifications 패키지의 주요 특징

  • 다양한 알림 형식 지원: 기본 알림, 진동, 사운드, 이미지, LED 알림 등 다양한 형식의 알림을 설정할 수 있습니다.
  • 채널 관리: 알림마다 우선순위, 소리, 진동 패턴 등을 독립적으로 설정하여 사용자 맞춤형 알림 경험을 제공할 수 있습니다.
  • 스케줄링: 특정 시간이나 반복적으로 알림을 설정할 수 있습니다.
  • 펜딩 알림 관리: 이미 설정된 알림을 수정하거나 취소할 수 있습니다.
  • 백그라운드에서 작동: 앱이 실행되지 않아도 알림을 제공할 수 있습니다.
  • 플랫폼별 맞춤 설정: Android와 iOS 플랫폼에 맞게 알림 디자인 및 기능을 최적화할 수 있습니다.

2. flutter_local_notifications 패키지 사용 방법

 

1. 프로젝트에 패키지 추가

dependencies:
  flutter_local_notifications: ^2.0.0

 

2. 권한 요청 (Android만 해당)

Android 8.0 (Oreo) 이상 버전에서는 알림을 표시하기 위해 권한을 요청해야 합니다.

const AndroidNotificationChannels channels = [
  // ... 채널 설정
];

await flutterLocalNotificationsPlugin
    .resolvePlatformSpecificImplementation<AndroidFlutterLocalNotificationsPlugin>()
    .requestPermissions(channels);

 

3. 알림 채널 설정

알림마다 우선순위, 소리, 진동 패턴 등을 설정합니다.

const AndroidNotificationChannel channel = AndroidNotificationChannel(
  'id',
  'name',
  importance: Importance.HIGH,
  playSound: true,
  showBadge: true,
  enableVibration: true,
);

await flutterLocalNotificationsPlugin.createNotificationChannel(channel);

 

4. 알림 설정

알림 내용, 아이콘, 채널, 스케줄링 등을 설정합니다.

const NotificationDetails notificationDetails = NotificationDetails(
  android: AndroidNotificationDetails(
    channel.id,
    channel.name,
    channel.importance,
    icon: Icon('drawable/ic_launcher.png'),
  ),
  iOS: IOSNotificationDetails(),
);

const NotificationPayload payload = NotificationPayload(
  title: '알림 제목',
  body: '알림 내용',
  payload: '알림 데이터',
);

await flutterLocalNotificationsPlugin.show(0, '알림 제목', '알림 내용', notificationDetails, payload);

 

 

5. 스케줄링 알림 설정

특정 시간이나 반복적으로 알림을 설정합니다.

const time = DateTime.now().add(const Duration(seconds: 5));

await flutterLocalNotificationsPlugin.schedule(
  1,
  '알림 제목',
  '알림 내용',
  time,
  notificationDetails,
  payload: '알림 데이터',
  repeat: Repeat.everyMinute,
);

 

6. 펜딩 알림 관리

이미 설정된 알림을 수정하거나 취소할 수 있습니다.

 

6.1. 알림 취소

await flutterLocalNotificationsPlugin.cancel(0); // 알림 ID 0을 취소
 

6.2. 알림 수정

const notificationDetails = NotificationDetails(
  android: AndroidNotificationDetails(
    'id',
    'name',
    importance: Importance.HIGH,
    icon: Icon('drawable/ic_launcher.png'),
  ),
  iOS: IOSNotificationDetails(),
);

const NotificationPayload payload = NotificationPayload(
  title: '수정된 알림 제목',
  body: '수정된 알림 내용',
  payload: '수정된 알림 데이터',
);

await flutterLocalNotificationsPlugin.update(0, '수정된 알림 제목', '수정된 알림 내용', notificationDetails, payload);
 

3. 알림 삭제

await flutterLocalNotificationsPlugin.cancelAll(); // 모든 알림 취소
 

7. 알림 상호작용 처리

사용자가 알림을 탭하거나 길게 누르는 경우 처리할 작업을 설정할 수 있습니다.

 

7.1. 알림 탭 처리

await flutterLocalNotificationsPlugin.onNotificationClick.listen((Notification notification) {
  // 알림 탭 시 처리할 작업
  print('알림 ID: ${notification.payload}');
});
 

7.2. 알림 길게 누름 처리

await flutterLocalNotificationsPlugin.onNotificationLongClick.listen((Notification notification) {
  // 알림 길게 누름 시 처리할 작업
  print('알림 ID: ${notification.payload}');
});
 

8. 추가 기능

  • 큰 그림 알림: 알림에 이미지를 추가합니다.
  • 인BOX 알림: 여러 개의 알림을 하나의 메시지로 그룹화합니다.
  • 대화형 알림: 알림에 버튼을 추가하여 사용자 입력을 수집합니다.
  • 커스텀 알림 사운드: 앱 내에서 알림 사운드를 사용합니다.

flutter_local_notifications 패키지는 Flutter 앱에서 다양한 로컬 알림을 손쉽게 구현하고 관리할 수 있도록 지원하는 강력한 도구입니다.

위에서 소개된 기본적인 기능 외에도 다양한 기능을 활용하여 사용자에게 더욱 풍부하고 유용한 알림 경험을 제공할 수 있습니다.

 

참고자료

주의

  • 이 글은 flutter_local_notifications 패키지의 기본적인 사용법을 소개하는 데 중점을 둡니다.
  • 실제 앱 개발에서는 상황에 맞게 코드를 수정하고 추가 기능을 구현해야 할 수 있습니다.
  • 패키지의 최신 버전과 문서를 참고하여 사용하는 것이 좋습니다.

 

 

수발가족을 위한 일기장 “나비일기장

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

 

카카오톡 대화방

https://open.kakao.com/o/gsS8Jbzg

 

반응형