Flutter Local Notification Kullanımı

Photo by Jamie Street on Unsplash

Merhabalar,

Anlatacağım konu ve konu ile ilgili vereceğim örnekte pub.dev içerisinde ki flutter_local_notifications pluginini kullanarak ilerliyor olacağız.

Yazıda bahsedeceğim noktalar ise;

• Platformlar içerisine eklenmesi gereken ayarlar
• Basit bir NotificationHelper hazırlanması
• NotificationHelper ile bildirim izinin hazırlanması
• NotificationHelper ile basit local bildirim gönderilmesi
• Planlanmış bildirim gönderme
• Hazırladığımız NotificationHelper sınıfının Widget içerisinde ki örnek kullanımı

Konumuzun ilk kısmı ile başlayalım,

Platformlar içerisine eklenmesi gereken ayarlar

Kurulumlar sırasına yapılması gerekenlerden kısaca bahsedelim, ilk olarak kullanacağımız eklentiyi pub.spec dosyamızın içerisinde dependencies altında tanımlayarak indirme işlemini gerçekleştirelim.

dependencies:
  flutter_local_notifications: ^6.0.0

sonra ki adım olarak ise android tarafında ki ayarlamalar ile devam edelim.

Android Tarafınının Hazırlanması

android:showWhenLocked="true"
android:turnScreenOn="true"

Yukarıda ki iki parametre AndroidManifest.xml dosyası altına activity içerisinde eklenmelidir.

Not: * Burada unutulmaması gereken nokta farklı bir bildirim sesi veya icon kullanmak için mutlaka platformlar tarafında ki dosyalar arasında eklenmiş olmalıdır.

iOS Tarafının hazırlanması

AppDelegate.m/AppDelegate.swift dosyasının içerisinde aşağıda ki kod eklenerek entegrasyon tamamlanabilir.

// Objective-c
if (@available(iOS 10.0, *)) {
  [UNUserNotificationCenter currentNotificationCenter].delegate = (id<UNUserNotificationCenterDelegate>) self;
}
// Swift
if #available(iOS 10.0, *) {
  UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
}

Gerekli ekleme işlemlerini tamamladığımıza göre NotificationHelper sınıfının hazırlanması ile devam edelim.

İlk olarak sınıf içerisinde kullanacağımız kütüphaneleri `pubspec.yaml` içerisine ekleyelim.

rxdart: ^0.24.1
flutter_local_notifications: ^1.4.4+1

Eklemiş olduğumuz kütüphanelerin kısaca ne amacla eklediğimizden bahsetmek gerekirse;

rxdart : Notification geldiginde bir listener kullanarak widget içerisinde dinleme yapabilmek için ekliyoruz.

flutter_local_notifications : Cihaz içerisinde local notification kullanabilmek için ekledik.

Notification helper sınıfın hazırlanması

Photo by Sigmund on Unsplash

Eklentilerimizi kurduk şimdi ise lafı uzatmadan sınıfın hazırlanması ile devam edelim.

class NotificationHelper { 
  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;
  final BehaviorSubject<ReceivedNotification>
      didReceivedLocalNotificationSubject =
      BehaviorSubject<ReceivedNotification>();
  var notificationSettings;
}

ilk olarak localde notification kullanabilmek adına flutterLocalNotificationsPlugin değişkeni oluşturduk.

Sonra Oluşturulan bu değişkenin çağırıldığı widget içerisinde dinlenebilmesi adına bir listener tanımladık. (didReceivedLocalNotificationSubject)

son olarak ise başlangıç ayarlarının tutulduğu değişkenimizi tanımladık.

Sınıf çağırıldığında gerekli hazırlıkları yapacak init fonksiyonumuzu hazırlayarak işleme devam edelim.

class NotificationHelper { 
  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;
  final BehaviorSubject<ReceivedNotification>
      didReceivedLocalNotificationSubject =
      BehaviorSubject<ReceivedNotification>();
  var notificationSettings;
init() async {
    flutterLocalNotificationsPlugin  = FlutterLocalNotificationsPlugin();
    if (Platform.isIOS) {
      _requestIOSPermission();
    }
    initializePlatform();
  }
}

init fonksiyonu içerisinde ilk adım olarak FlutterLocalNotificationsPlugin sınıfından bir instance oluşturduk ve atama işlemini yaptık.

NotificationHelper ile bildirim izinin hazırlanması

Sonra ise iOS platformu özelinde Bildirim izinlerinin sorulması için bir method hazırladık.

Not: Android tarafında bildirim izinine ihtiyaç duymamaktadır. Default izini aktif olarak kullanılmakta, kullanıcı ister ise bildirim ayarlarından uygulamada kullanılan bildirim izinini kapatabilir.

iOS özelinde hazırlanan _requestIOSPermission fonksiyonu ile devam edelim;

class NotificationHelper { 
  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;
  final BehaviorSubject<ReceivedNotification>
      didReceivedLocalNotificationSubject =
      BehaviorSubject<ReceivedNotification>();
  var notificationSettings;
init() async {
    flutterLocalNotificationsPlugin  = FlutterLocalNotificationsPlugin();
    if (Platform.isIOS) {
      _requestIOSPermission();
    }
    initializePlatform();
  }
_requestIOSPermission() {
    flutterLocalNotificationsPlugin
        .resolvePlatformSpecificImplementation<
            IOSFlutterLocalNotificationsPlugin>()
        .requestPermissions(
          alert: false,
          badge: true,
          sound: true,
        );
  }
}

Bu fonksiyon iOS tarafında ki bildirim izinini kullanıcıya gösterecek ve kabul edilmesi durumunda bildirimler aktif olacaktır.

Bildirim permission özelliklerini tamamladık.

Şimdi ise platform ayarlamaları ile devam edelim.

initializePlatform

bu fonksiyon yardımı ile class içerisinde global değişken olarak tanımladığımız notificationSettings tanımlamasını yapıyor olucaz. Sonrasında tanımladığımız notificationSettings ile bildirimin yüklenmesi durumunda geriye, widget içerisine tıklanma durumunu göndermek için kullanıyor olucaz.

class NotificationHelper { 
  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;
  final BehaviorSubject<ReceivedNotification>
      didReceivedLocalNotificationSubject =
      BehaviorSubject<ReceivedNotification>();
  var notificationSettings;
init() async {
    flutterLocalNotificationsPlugin  = FlutterLocalNotificationsPlugin();
    if (Platform.isIOS) {
      _requestIOSPermission();
    }
    initializePlatform();
  }
_requestIOSPermission() {
    flutterLocalNotificationsPlugin
        .resolvePlatformSpecificImplementation<
            IOSFlutterLocalNotificationsPlugin>()
        .requestPermissions(
          alert: false,
          badge: true,
          sound: true,
        );
  }
initializePlatform() {
    var initializationSettingsAndroid =
        AndroidInitializationSettings('app_icon');
    var initializationSettingsIOS = IOSInitializationSettings(
      requestAlertPermission: true,
      requestBadgePermission: true,
      requestSoundPermission: false,
      onDidReceiveLocalNotification: (id, title, body, payload) async {
        ReceivedNotification receivedNotification =   ReceivedNotification(
            id: id, title: title, body: body, payload: payload);
        didReceivedLocalNotificationSubject.add(receivedNotification);
      },
    );
}

initializePlatform fonksiyonumuzu inceleyerek devam edelim.

İlk olarak android tarafında kullanılacak bildirim ikonunun eklenmesi gerekmekte. Benim eklemiş olduğum resim dosyasının adı app_icon olduğu için AndroidInitializationSettings içerisine parametre olarak geçtim.

Dosyayı eklemeniz gereken yol ise; Src içerisinde drawable isimli klasör içerisinde yer almalıdır.

Son olarak ise IOSInitializationSettings ile iOS tarafında ki gerekli platform ayarlamalarını tamamladık.

widget taradında bir listener yardımı onDidReceiveLocalNotification durumunu dinlemek için, daha önce global olarak tanımladığımız didReceivedLocalNotificationSubject değişkeni içerisine ReceivedNotification oluşturarak ekleme işlemi yaptık.

Böylece Gerekli bütün ayarları tamamlamış olduk.

NotificationHelper ile basit local bildirim gönderilmesi

Photo by Luca Bravo on Unsplash

Şimdi ise NotificationHelper sınıfını kullanarak kullanıcıya bildirim göndermek için kullanacağımız gerekli methodları hazırlayarak devam edelim.

Notification göstermek için kullancağımız methodu inceleyerek devam edelim;

Future<void> showNotification() async {
    var androidChannelSpecifics = AndroidNotificationDetails(
      'CHANNEL_ID',
      'CHANNEL_NAME',
      "CHANNEL_DESCRIPTION",
      importance: Importance.Max,
      priority: Priority.High,
      playSound: true,
      timeoutAfter: 5000,
      styleInformation: DefaultStyleInformation(true, true),
    );
    var iosChannelSpecifics = IOSNotificationDetails();
    var platformChannelSpecifics =
        NotificationDetails(androidChannelSpecifics, iosChannelSpecifics);
    await flutterLocalNotificationsPlugin.show(
      0,
      'Test Title',
      'Test Body', //null
      platformChannelSpecifics,
      payload: 'New Payload',
    );
  }

fonksiyon özelinde android ve ios bildirim detaylarını oluşturup plugin içerisinde ki show methoduna göndererek bildirim oluşturma işlemini tamamladık.

Not: Burada dikkat edilmesi gereken noktalardan biri ise geçilen payload değerinin, gelen bildirimin tıklanması durumunda erişilebiliyor olmasıdır. Eğer bildirim tıklanması durumunda bir parametre geçmek istenirse payload kullanılması gerekebilir.

showNotification

Methodumuzu tamamladık. Şimdi ise bu methodun tıklanması durumunda çalışması gereken listener kısmını ayarlayarak devam edelim.

setOnNotificationClick(Function onNotificationClick) async {
    await flutterLocalNotificationsPlugin.initialize(initializationSettings,
        onSelectNotification: (String payload) async {
      onNotificationClick(payload);
    });
  }

Burada setOnNotificationClick methodunda klasik bi callback yöntemi kullanarak verilen onNotificationClick fonksiyonuna işlemin tamamlanması için gerekli parametreleri geçerek işlemi tamamladık.

Yukarıda ki not içerisinde de söylediğimiz gibi, bildirimi oluştururken sadece geçilen payload değerine erişilebildiği unutulmamalıdır.

iOS özelinde Kullanılan alt versiyonlar için geçerli olacak bir listener hazırlayarak devam edelim;

setListenerForLowerVersions(Function onNotificationInLowerVersions) {
 didReceivedLocalNotificationSubject.listen((receivedNotification) {
  onNotificationInLowerVersions(receivedNotification);
 });
}

Yukarıda platform ayarlama işlemleri sırasında, kullandığımız IOSInitializationSettings methodunun dönen callback değeri yardımı ile didReceivedLocalNotificationSubject içerisine eklemiş olduğumuz ReceivedNotification değerini dinleme işlemini gerçekleştiriyoruz.

Bildirim gönderme işlemini biraz genişleterek devam edelim;

Notification’ının belirli bir time üzerine gösterilmesi için kullanılacak bir fonksiyon oluşturalım.

Future<void> showWeeklyAtDayAndTime() async {
    var time = Time(20, 0, 0);
    var androidChannelSpecifics = AndroidNotificationDetails(
      'CHANNEL_ID_TIME',
      'CHANNEL_NAME_TIME',
      "CHANNEL_DESCRIPTION_TIME",
      importance: Importance.Max,
      priority: Priority.High,
    );
    var iosChannelSpecifics = IOSNotificationDetails();
    var platformChannelSpecifics =
        NotificationDetails(androidChannelSpecifics, iosChannelSpecifics);
    await flutterLocalNotificationsPlugin.showWeeklyAtDayAndTime(
      0,
      '${time.hour}:${time.minute}.${time.second}',
      'Test Body', //null
      Day.Saturday,
      time,
      platformChannelSpecifics,
      payload: 'Test Payload',
    );
  }

Burada belirli bir zaman hazırlayarak plugin içerisinde bulunan showWeeklyAtDayAndTime yardımı ile haftalık bir bildirim ayarlama işlemi gerçekleştirmiş olduk.

flutterLocalNotificationsPlugin plugini içerisinde yer alan diğer methodları hazırladığımız NotificationHelper sınıfı içerisine ekleme işlemi yapmadan örneğimize devam ediyor olucaz.

Devam etmeden önce oluşturulan planlı notification işlemlerini iptal etmek için kullancağımız iki methodu hazırlayarak devam edelim.

Future<void> cancelNotification() async {
  await flutterLocalNotificationsPlugin.cancel(0);
}
Future<void> cancelAllNotification() async {
  await flutterLocalNotificationsPlugin.cancelAll();
}

isminden de anlayacağınız üzere henüz gösterilmeyen ve gösterilmek için beklenen bildirimleri iptal etmek için bu iki methodu kullanıyoruz.

Future<int> getPendingNotificationCount() async {
    List<PendingNotificationRequest> pendingNotifications =
        await flutterLocalNotificationsPlugin.pendingNotificationRequests();
    return pendingNotifications.length;
  }

NotificationHelper sınıfına kullanıcıya göstermek için bekleyen zamanlanmış bildirim sayısını veren methodumuzu ekledik.

Son olarak ise hazırlamış olduğumuz classın instance’ını oluşturarak kullanılacak olan yerde hazır hale getiriyoruz.

NotificationHelper notificationHelper = NotificationHelper._();
class ReceivedNotification {
  final int id;
  final String title;
  final String body;
  final String payload;
ReceivedNotification({
    @required this.id,
    @required this.title,
    @required this.body,
    @required this.payload,
  });
}

Hazırladığımız NotificationHelper sınıfının Widget içerisinde ki örnek kullanımı

Şimdi hazırladığımız NotificationHelper sınıfını bir widget içerisinde kullanarak yazımızı tamamlayalım.

Photo by Artur Shamsutdinov on Unsplash

Main widget altında init işlemi ile notification göndermeye başlayalım.

int notificationCount = 0;
@override
  void initState() {
    super.initState();
    notificationHelper
        .setListenerForLowerVersions(onNotificationInLowerVersions);
    notificationPlugin.setOnNotificationClick(onNotificationClick);
  }

Bildirimlerin tıklanmaları durumunda konsol ekranında payload gösterme işlemini gerçekleştirmek için sınıfımızın listener methodlarını initState altında hazır hale getiriyoruz.

onNotificationInLowerVersions(ReceivedNotification receivedNotification) {
    print('onNotificationInLowerVersions Received ${receivedNotification.id}');
}
onNotificationClick(String payload) {
    print('onNotificationClick, Payload $payload');    
}

sonra ki adım olarak ise ekrana bir button ekliyorum ve butonun tıklanması durumunda onPressed altında notificationHelper sınıfının showNotification methodu yardımı ile bildirim gönderme işlemini tamamlıyoruz.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Local Notifications'),
      ),
      body: Center(
        child: FlatButton(
          onPressed: () async {
            await notificationHelper.showNotification();
          },
          child: Text('Send'),
        ),
      ),
    );
  }

Konuyla ilgili önerileriniz ve sorularınız varsa yorumlarınızı bekliyorum. Okuduğunuz için teşekkür ederim..