[Flutter] 알림 구현

제리·2022년 1월 4일
0

1

(pubspec.yaml) 패키지 추가

dependencies:
  flutter_local_notifications:

2

(notification.dart) 파일에 아래 코드 복붙 ㄱㄱ

import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

final notifications = FlutterLocalNotificationsPlugin();


//1. 앱로드시 실행할 기본설정
initNotification() async {

  //안드로이드용 아이콘파일 이름
  var androidSetting = AndroidInitializationSettings('app_icon');

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

  var initializationSettings = InitializationSettings(
      android: androidSetting,
      iOS: iosSetting
  );
  await notifications.initialize(
    initializationSettings,
    //알림 누를때 함수실행하고 싶으면
    //onSelectNotification: 함수명추가
  );
}

3

(Android) app.icon 경로에 아이콘 추가하기

안드로이드 아이콘 경로 : android/app/src/main/res/drawable/app.icon.png
여기에 icon 만들어줘야하는데 투명배경에 흰색으로만 만들어야함

(ios) 프로젝트 내의 ios/Runner/AppDelegate.swift 파일 여셈

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

이거를 GeneratedPluginRegistrant.register(with: self) 이런 코드 위에 복붙 하셈

4

아래 코드의 함수를 원하는 곳에서 실행하면 알림 뜸

//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,
      '제목1',
      '내용1',
      NotificationDetails(android: androidDetails, iOS: iosDetails),
      payload:'부가정보' // 부가정보
    );
}

5

알림 클릭하면 특정 페이지로 이동하려면?

initNotification()함수에서 onSelectNotification 속성을 추가한다.
콜백에서 페이지 이동시키면 됨

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

6

특정 시간에 알림파일 띄우는법

시간다루는 패키지를 import 해온다. (pubspec.yaml 안해도됨)

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

7

(notification.dart)
아래 코드의 함수를 복붙하고 써먹는다.

showNotification2() async {

  tz.initializeTimeZones();

  var androidDetails = const AndroidNotificationDetails(
    '유니크한 알림 ID',
    '알림종류 설명',
    priority: Priority.high,
    importance: Importance.max,
    color: Color.fromARGB(255, 255, 0, 0),
  );
  var iosDetails = const IOSNotificationDetails(
    presentAlert: true,
    presentBadge: true,
    presentSound: true,
  );

  notifications.zonedSchedule(
      2,
      '제목2',
      '내용2',
      tz.TZDateTime.now(tz.local).add(Duration(seconds: 5)),
      NotificationDetails(android: androidDetails, iOS: iosDetails),
      androidAllowWhileIdle: true,
      uiLocalNotificationDateInterpretation:
      UILocalNotificationDateInterpretation.absoluteTime
  );
}

8

주기적으로 알림을 띄우고 싶으면?

matchDateTimeComponents 속성을 추가한다!

notifications.zonedSchedule(
      2,
      '제목2',
      '내용2',
      tz.TZDateTime.now(tz.local).add(Duration(seconds: 5)),
      NotificationDetails(android: androidDetails, iOS: iosDetails),
      androidAllowWhileIdle: true,
      uiLocalNotificationDateInterpretation:
      UILocalNotificationDateInterpretation.absoluteTime
      matchDateTimeComponents: DateTimeComponents.time
  );

특정시간에 알림을 띄우려면?

시간만들어주는 함수를 이용한다.

(notification.dart)
아래코드 복붙 ㄱㄱ

makeDate(hour, min, sec){
  var now = tz.TZDateTime.now(tz.local);
  var when = tz.TZDateTime(tz.local, now.year, now.month, now.day, hour, min, sec);
  if (when.isBefore(now)) {
    return when.add(Duration(days: 1));
  } else {
    return when;
  }
}

그다음 tz.TzDateTime ~~ 이부분 지우고 make(7,0,0) 이런식으로 하면 오전 7시 0분 0초마다 알림을 울린다.

profile
iOS 준비중

0개의 댓글