[037] 플러터 (Flutter) 배우기 - 푸시 알림 보내기(local notification)

안녕하세요~ totally 개발자입니다.

 

flutter_local_notifications

 

오늘은 앱에서 푸시 알림을 보내는 방법에 대해 살펴보겠습니다. 플러터 패키지인 flutter_local_notifications를 명시해서 설치한 후 사용하면 됩니다.

 

Step 1: pubspec.yaml에 다음처럼 등록해줍니다.

 

 

 

Step 2: 프로젝트경로/android/app/src/main/AndroidManifest.xml에 다음을 추가해줍니다.

 

android:showWhenLocked="true"

android:turnScreenOn="true"

 

 

 

Step 3: 프로젝트경로/ios/Runner/AppDelegate.swift에 다음을 Bool { } 내에 추가해줍니다.

 

if #available(iOS 10.0, *) { 

   UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate

}

 

 

 

Step 4: notification.dart 파일을 하나 만들어주시고 class를 작성해줍니다. 싱글톤 class로 활용하기 위해 static를 붙여주었습니다. 

 

 

아래처럼 init 메소드를 만들어주고 다음처럼 입력하시면 됩니다. 맨 아래에 전체 소소 코드 첨부했으니 그 부분 참고하시면 됩니다. 11번째에 mipmap/ic_launcher 부분에 커스텀 아이콘이 있다면 그것을 넣으시면 됩니다. 15~17번째 줄은 먼저 false로 맞춰주는데 추후 이 부분을 true로 변경하여 권한 요청할 때 사용합니다. 

 

바로 이 메소드를 호출하여 권한을 요청합니다.

 

푸시 알림을 보내는 메소드입니다. 52번째 줄에 원하는 title과 body 내용을 넣어주시면 됩니다.

 

Step 5: main.dart 부분을 완성해줍니다. 여기에서 33번째 줄에 FlutterLocalNotification.init() 함수를 호출하여 초기화해주신 다음 저는 Future.delayed를 사용하여 3초 후에 권한을 요청하는 팝업을 띄우게 했습니다. 46번째에서 TextButton를 누르면 showNotification 메소드를 호출하여 푸시 알림이 오게 되는 구조입니다.

 

 

 

Step 6: 결과는 아래와 같습니다.

 

 

 

Step 7: 알림창에도 보면 이렇게 나타나는 것을 확인할 수 있습니다.

 

 

 

 

References

 

https://pub.dev/packages/flutter_local_notifications

flutter_local_notifications | Flutter Package

 

[전체 소스 코드]

 

notification.dart

 

main.dart

 

 

알림을 탭 했을 때 특정 페이지로 이동이 필요한 경우 아래 포스팅을 참고하시기 바랍니다.

https://totally-developer.tistory.com/148

[064] 플러터 (Flutter) 배우기 - 푸시 알림을 탭하여 특정 페이지로 이동하기(flutter_local_notification)

 

[유튜브 강좌 영상]

 

https://youtu.be/sDyoWBglxhc