[Flutter] Local notification 알림 주는 법

Local notification 알림 주는 법

• 모바일로 알림 보내기
  • 우선 notification에는 2가지의 알림이 있다.
    • 서버에서 보내는 push notification
    • 앱 자체에서 실행하는 local notification
  • 이번 강의는 local notification을 배울 예정
• local notification 설치 방법
  • pubspec.yaml에서 아래의 코드 추가 후 pub get 실행해서 설치

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.4
  image_picker: ^0.8.4+4
  shared_preferences: ^2.0.11
  provider: ^6.0.1
  flutter_local_notifications: ^9.1.5  // <-- 요거

• 셋팅
  • 안드로이드 셋팅
    • android/app/src/main/res/drawable 폴더에 원하는 아이콘 첨부하기
    • 단, 아웃 라인이 흰색인 png 로 추가해줘야 한다.
  • IOS 셋팅
    • 허락 받는 코드를 작성하기

//ios에서 앱 로드시 유저에게 권한요청하려면
  var iosSetting = IOSInitializationSettings(
    requestAlertPermission: true,
    requestBadgePermission: true,
    requestSoundPermission: true,
  );

• 첫 번째 셋팅 총 코드
  • 알림을 띄우기 위해 실행해야할 코드
  • 아래의 코드에서 요즘버전의 local_notification은 IOSInitializationSettings() 부분을 DarwinInitializationSettings()로 변경해야 된다고 함.

  import 'package:flutter/material.dart';
  import 'package:flutter_local_notifications/flutter_local_notifications.dart';
  
  final notifications = FlutterLocalNotificationsPlugin();
  
  //1. 앱로드시 실행할 기본설정
  initNotification() async {
  
    //안드로이드용 아이콘파일 이름
    var androidSetting = AndroidInitializationSettings('notification');
  
    //ios에서 앱 로드시 유저에게 권한요청하려면
    var iosSetting = IOSInitializationSettings(
      requestAlertPermission: true,
      requestBadgePermission: true,
      requestSoundPermission: true,
    );
  
    var initializationSettings = InitializationSettings(
        android: androidSetting,
        iOS: iosSetting
    );
    await notifications.initialize(
      initializationSettings,
      //알림 누를때 함수실행하고 싶으면
      //onSelectNotification: 함수명추가
    );
  } 
  

• 두 번째 셋팅 총 코드
  • 알림을 띄우는 코드
  • 아래의 코드에서 요즘버전의 local_notification은 IOSNotificationDetails() 부분을 DarwinNotificationDetails()로 변경해야 된다고 함.

  //2. 이 함수 원하는 곳에서 실행하면 알림 뜸
  showNotification() async {
  
    var androidDetails = AndroidNotificationDetails(
      '유니크한 알림 채널 ID',
      '알림종류 설명',
      priority: Priority.high, // 우선순위
      importance: Importance.max, // 중요도
      color: Color.fromARGB(255, 255, 0, 0),
    );
  
    var iosDetails = IOSNotificationDetails(
      presentAlert: true,
      presentBadge: true,
      presentSound: true,
    );
  
    // 알림 id, 제목, 내용 맘대로 채우기
    notifications.show(
        1, // 알림의 유니크한 ID
        '제목1',
        '내용1',
        NotificationDetails(android: androidDetails, iOS: iosDetails)
    );
  }
  

• 이후 실행시 에러가 발생한다면 HotLoad를 눌러보고
• 그래도 안되면 휴대폰을 완전히 끄고 Refresh를 한 뒤 다시 실행하면 실행이 잘 되는 것을 확인할 수 있다.
• 실행 시킨 사진

• 실행 후 알림공간 사진

• 해당 알림의 특징으로는
  • 알람을 클릭 시 앱이 실행되는데
  • 특정 페이지를 보여주고자 할 경우엔
    • 우선적으로 실행해야할 코드에서 notifications.initialize() 공간에
      • onSelectNotification에 콜백함수를 실행시켜서
      • Navigator.push로 원하는 페이지를 보여줄 수 있는데
      • 이때 MaterialApp으로 된 context가 없어서 에러가 발생하기에
      • main.dart 파일에서 함수에 context를 담아서 보내줘 사용하기

    // main.dart
    @override
      void initState() {
        super.initState();
        initNotification(context);
        getData();
      }
    

    // notification.dart
    import 'package:flutter/material.dart';
    import 'package:flutter_local_notifications/flutter_local_notifications.dart';
    
    final notifications = FlutterLocalNotificationsPlugin();
    
    //1. 앱로드시 실행할 기본설정
    initNotification(context) async {
    
      //안드로이드용 아이콘파일 이름
      var androidSetting = AndroidInitializationSettings('notification');
    
      //ios에서 앱 로드시 유저에게 권한요청하려면
      var iosSetting = IOSInitializationSettings(
        requestAlertPermission: true,
        requestBadgePermission: true,
        requestSoundPermission: true,
      );
    
      var initializationSettings = InitializationSettings(
          android: androidSetting,
          iOS: iosSetting
      );
      await notifications.initialize(
        initializationSettings,
        //알림 누를때 함수실행하고 싶으면
        onSelectNotification: (payload){
          Navigator.push(
              context,
              MaterialPageRoute(builder: (context)=> Text('새로운 페이지'))
          );
        }
      );
    }
    
    //2. 이 함수 원하는 곳에서 실행하면 알림 뜸
    showNotification() async {
    
      var androidDetails = AndroidNotificationDetails(
        '유니크한 알림 채널 ID',
        '알림종류 설명',
        priority: Priority.high, // 우선순위
        importance: Importance.max, // 중요도
        color: Color.fromARGB(255, 255, 0, 0),
      );
    
      var iosDetails = IOSNotificationDetails(
        presentAlert: true,
        presentBadge: true,
        presentSound: true,
      );
    
      // 알림 id, 제목, 내용 맘대로 채우기
      notifications.show(
          1, // 알림의 유니크한 ID
          '제목1',
          '내용1',
          NotificationDetails(android: androidDetails, iOS: iosDetails)
      );
    }
    

• 그리고 알림을 보낼 때 부가 정보 또한 함께 전송할 수 있다.
  • 알림을 띄우는 코드에서 payload로 전송하여
  • 알림을 띄우기 위해 실행하는 코드에서 payload로 받을 수 있는데
  • 해당 기능에 버그가 좀 있다고 하니 사용하지 않는게 좋을지도?
    • 기존 payload 값이 잘 변하지 않는다고 함.

    notifications.show(
          1, // 알림의 유니크한 ID
          '제목1',
          '내용1',
          NotificationDetails(android: androidDetails, iOS: iosDetails),
        payload: '안녕'
      );
    

    await notifications.initialize(
        initializationSettings,
        //알림 누를때 함수실행하고 싶으면
        onSelectNotification: (payload){
          Navigator.push(
              context,
              MaterialPageRoute(builder: (context)=> Text('새로운 페이지'))
          );
        }
      );
    

•