안녕하세용:)
2020년 4월에 작업했던 [flutter] local notification Quick Start 작업 이후로
이번 앱에도 알림 기능을 적용 시켜야해서 2020년 11월 기준으로 다시 작성해보려합니당

> **🔥 이번엔 맥북이 있으니! iOS setting부터 해서 iOS 기준으로 잘 돌아가게끔 해보겠습니다🔥**

0. install

https://pub.dev/packages/flutter_local_notifications/install

dependencies:
  # notification (20.11.11 기준)
  flutter_local_notifications: ^3.0.1+2

지원되는 플랫폼

• Android 4.1 이상
  • NotificationCompat API를 사용하여 구형 Android 장치를 실행할 수 있습니다.
• iOS 8.0 이상
  • 10 이전의 iOS 버전에서 플러그인은 UILocalNotification API를 사용합니다. UserNotification API를 (aka User Notifications Framework)는 iOS 10이상에서 사용됩니다.

1. [Android] AndroidManifest.xml Settings

라이브러리 공식 설명

• https://pub.dev/packages/flutter_local_notifications#-android-setup

애플리케이션의 AndroidManifest.xml파일

• android/app/src/main/AndroidManifest.xml 전체 예제

1. 권한 요청 (permission)

{flutter App} > android > app > src > main > AppDelegate.swift

    <!-- local notification -->
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" />

• 부팅시 서비스(Service) 실행하기

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

• 진동(VIBRATE) 사용

<uses-permission android:name="android.permission.VIBRATE"/>

• 휴대폰이 꺼져있는 상태에서 알림이 발생하면 화면을 깨우는 기능
  (알림 발생 시 화면 켜지게 하는 기능)

<uses-permission android:name="android.permission.WAKE_LOCK"/>

• Full-screen intent notifications
  (cf. Full-Screen Intent Notification 화면 예시 & 설명)

<uses-permission android:name="android.permission.WAKE_LOCK"/>

2. receiver 추가

    ...

    <application
        ...
        >
        <activity
            ...
            android:windowSoftInputMode="adjustResize"
            android:showWhenLocked="true"
            android:turnScreenOn="true">
            <intent-filter>
                ...
            </intent-filter>
        </activity>
      
      	...
      
        <receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />
        <receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED"/>
                <action android:name="android.intent.action.MY_PACKAGE_REPLACED"/>
                <action android:name="android.intent.action.QUICKBOOT_POWERON" />
                <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
            </intent-filter>
        </receiver>

      	...
      
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

• 기기가 잠겨있을 때도 출력

<activity
    ...
    android:showWhenLocked="true"
    android:turnScreenOn="true">

• 재부팅시에도 notifications remain scheduled 유지하려면 추가

<receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver">
    <intent-filter>
        <action android:name="android.intent.action.BOOT_COMPLETED"/>
        <action android:name="android.intent.action.MY_PACKAGE_REPLACED"/>
        <action android:name="android.intent.action.QUICKBOOT_POWERON" />
        <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
    </intent-filter>
</receiver>

• scheduled notifications 화면에 출력할려면 추가

<receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />

2. [iOS] native Settings

라이브러리 공식 설명

• https://pub.dev/packages/flutter_local_notifications#-ios-setup

1. foreground에 있는 동안 알림 처리

{flutter App} > ios > Runner > AppDelegate.swift

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    ...
  ) -> Bool {
  
    if #available(iOS 10.0, *) {
      UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
    } 
    
    ...
  }
}

iOS는 기본적으로 어플이 열려있을 때(=foreground) 알람이 울리지 않도록 설정되어있습니다.

• iOS 10 이상에서 presentation options사용해 foreground에 있는 동안 알림이 트리거 될대 동작 컨트롤

if #available(iOS 10.0, *) {
  UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
}

3. [main.dart] init Settings

✅ 새 인스턴스를 만든 다음 각 플랫폼에 사용할 설정으로 초기화 작업

void main() async {
  ...
  _initNotiSetting();

  runApp(MyApp());
}

void _initNotiSetting() async {
  final flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
  final initSettingsAndroid = AndroidInitializationSettings('app_icon');
  final initSettingsIOS = IOSInitializationSettings(
    requestSoundPermission: false,
    requestBadgePermission: false,
    requestAlertPermission: false,
  );
  final initSettings = InitializationSettings(
    android: initSettingsAndroid,
    iOS: initSettingsIOS,
  );
  await flutterLocalNotificationsPlugin.initialize(
    initSettings,
  );
}

• 초기화는 한 번만 수행해야 하며 이는 main.dart에서 기능 수행
  (또는 앱에 표시된 첫 번째 페이지 내에서이 작업을 수행 할 수 있습니다.)

• 앱 시작 후 바로 권한을 묻길 원한다면 requestSoundPermission true로 변경
  • 저는 앱시작 후 묻는게 아닌 알림 시간설정 후 알림권한을 물어봤으면 해서 초기설정에는 false로 작성했습니다.

4. noti setting UI

• UI코드는 기호에 맞춰 작성해주시면 됩니다.
  • UI코드는 관련된 local notification과 관련없기에 따로 노출하지않겠습니다 😉
• 다음과 설정 페이지가 있을 때 "확인" 버튼을 누른 이후 notification을 설정 코드 설명하겠습니다.
  

code

UI

    SubmitButton(
        ...
        text: '확인',
        onPressed: isDisabled ? null : _dailyAtTimeNotification,
    )

onPressed

import 'package:timezone/data/latest.dart' as tz;
import 'package:timezone/timezone.dart' as tz;


Future _dailyAtTimeNotification() async {
    final notiTitle = 'title';
    final notiDesc = 'description';

    final flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
    final result = await flutterLocalNotificationsPlugin
        .resolvePlatformSpecificImplementation<
            IOSFlutterLocalNotificationsPlugin>()
        ?.requestPermissions(
          alert: true,
          badge: true,
          sound: true,
        );

    var android = AndroidNotificationDetails('id', notiTitle, notiDesc,
        importance: Importance.max, priority: Priority.max);
    var ios = IOSNotificationDetails();
    var detail = NotificationDetails(android: android, iOS: ios);

    if (result) {
      await flutterLocalNotificationsPlugin
          .resolvePlatformSpecificImplementation<
              AndroidFlutterLocalNotificationsPlugin>()
          ?.deleteNotificationChannelGroup('id');
          
      await flutterLocalNotificationsPlugin.zonedSchedule(
        0,
        notiTitle,
        notiDesc,
        _setNotiTime(),
        detail,
        androidAllowWhileIdle: true,
        uiLocalNotificationDateInterpretation:
            UILocalNotificationDateInterpretation.absoluteTime,
        matchDateTimeComponents: DateTimeComponents.time,
      );
    }
  }

  tz.TZDateTime _setNotiTime() {
    tz.initializeTimeZones();
    tz.setLocalLocation(tz.getLocation('Asia/Seoul'));

    final now = tz.TZDateTime.now(tz.local);
    var scheduledDate = tz.TZDateTime(tz.local, now.year, now.month, now.day,
        10, 0);

    return scheduledDate;
  }
}

중요

• 우선 기존에 쓰던 schedule()이 버전업이 되면서 deprecated(사용중단) 됐습니다.
• FlutterLocalNotificationsPlugin().zonedSchedule()로 사용하면된다.
  • 기존 : 지정된 날짜 및 시간에 표시 할 알림을 예약합니다.
  • 변경 : 특정 시간대를 기준으로 지정된 날짜 및 시간에 표시되도록 알림을 예약합니다.
    = 간단히 말해서 timezone설정이 가장 큰 차이점
  
  
• 가장 눈여겨 볼 곳 = _setNotiTime()
  • TZDateTime은 default timezone이 UTC로 되어있다.
  • 그래서 tz.initializeTimeZones(); 후
    필수로 tz.setLocalLocation(tz.getLocation('Asia/Seoul'));를 해줘야한다.
  • setLocation할때 아쉽지만 timezone(ex. KST)을 넣는게 아닌
    location name(ex. Asia/Seoul)를 넣어줘야한다.
  
  
• 물론 나와있는 소스코드 그대로 설정하면 한국이 아닌 다른 timezone에 계신 분들은.. 말그대로 이슈 발생🔥🔥🔥🔥
  • https://pub.dev/packages/flutter_native_timezone
  • await FlutterNativeTimezone.getLocalTimezone(); 위 라이브러리를 이용해서 개인적으로 provider로 관리해서 받아오지만 따로 적지않았는데
    해당 라이브러리를 사용하면 문제없이 location name설정이 가능합니다.

* 아래 다음 코드를 추가를 안하면 이전 NotificationChannel들이 살아있어서 다중으로 알림 지옥을 받게된다..🔥 * 이말은 즉 여러개의 알람을 하고 싶을 경우, 다음 `deleteNotificationChannelGroup`를 빼주면 된다. ```dart await flutterLocalNotificationsPlugin .resolvePlatformSpecificImplementation() ?.deleteNotificationChannelGroup('id'); ```

5.result

setting

foreground

background