Dalam tutorial kali ini, kita akan membahas bagaimana cara membuat dan menampilkan notifikasi lokal di latar belakang aplikasi Flutter. Notifikasi lokal sangat berguna untuk memberikan pemberitahuan penting kepada pengguna tanpa perlu terhubung dengan server.
Kadang-kadang pengguna menginginkan beberapa fitur yang sangat penting seperti pembaruan berita terbaru, pembaruan artikel terbaru, peringatan kondisi cuaca, pembaruan profil lengkap, pembaruan acara mendatang, dan banyak lagi pada perangkat Android atau iOS-nya tanpa membuka aplikasi. Jika Anda ingin mengembangkan jenis aplikasi Android dan iOS seperti itu, maka artikel ini akan membantu Anda melakukannya. Dalam proses ini, kami menyiapkan background task yang secara berkala memeriksa pembaruan tentang event terbaru atau notifikasi.
Flutter WorkManager
Ini digunakan sebagai pembungkus Android WorkManager dan juga iOS performFetchWithCompletionHandler, yang efektif memungkinkan eksekusi kode Dart headless di background. WorkManager menyediakan API yang mudah digunakan di mana kita dapat menentukan background task yang harus berjalan sekali atau secara berkala, menerapkan berbagai batasan seperti jika task membutuhkan koneksi internet, atau jika baterai harus sepenuhnya terisi, dan banyak lagi.
Flutter Local Notifications
Flutter Local Notifications adalah plugin cross-platform untuk menampilkan notifikasi pada aplikasi flutter. Plugin ini menawarkan banyak fitur seperti jadwal kapan notifikasi harus muncul, menampilkan notifikasi secara periodik (berdasarkan interval), menangani ketika pengguna mengetuk notifikasi saat aplikasi berada di foreground, background, atau terminated, menentukan suara notifikasi, dan banyak lagi.
Di sini, kita akan membuat background task dengan eksekusi headless. Untuk memulainya, kita perlu menginstal beberapa plugin flutter dan Android Studio harus terpasang di sistem lokal.
- Buka Android Studio dan buat sebuah proyek aplikasi Flutter baru dengan nama ‘haloflutter’.
- Setelah proyek dibuat dan berhasil disinkronisasi, hubungkan perangkat Android Anda ke Android Studio dan pastikan opsi Pengembang dan debugging USB sudah Aktif.
- Jalankan proyek dengan mengklik ikon hijau pertama di bagian atas tengah untuk memastikan proyek berhasil dibangun dan berjalan dengan baik (pertama kali Android Studio memerlukan sedikit lebih banyak waktu dari biasanya).
- Sekarang, saatnya untuk menginstal plugin yang diperlukan. Buka file ‘pubspec.yaml’ dari struktur proyek haloflutter -> pubspec.yaml dan tambahkan dua dependensi berikut, yaitu Workmanager dan flutter_local_notifications.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
# Use with the Workmanager class for background jobs headless execution.
workmanager: ^0.5.1
# Use with FlutterLocalNotificationsPlugin class for local push notifications.
flutter_local_notifications: ^13.0.0
- Setelah Anda melakukan langkah-langkah di atas, klik perintah flutter ‘Packages get’ yang muncul di bagian tengah atas untuk menginstal semua paket dan plugin yang diperlukan atau ketikkan di terminal flutter pub get.
- Sekarang, saatnya menambahkan beberapa permission yang diperlukan, buka file ‘AndroidManifest.xml’ dari struktur direktori proyek haloflutter -> android -> app -> src -> main -> AndroidManifest.xml dan tambahkan permission berikut.
<!-- tambahkan permission dibawah ini ke dalam tag 'manifest' -->
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<!-- tambahkan permission dibawah ini ke dalam tag 'application' -->
<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"/>
</intent-filter>
</receiver>
Sekarang saatnya untuk mulai membuat kode, buka berkas ‘main.dart’ dari struktur direktori proyek haloflutter -> lib -> main.dart, lalu gunakan seluruh kode dibawah ini.
import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:workmanager/workmanager.dart';
void main() {
//Diperlukan jika Anda bermaksud untuk menginisialisasi di dalam fungsi main.
WidgetsFlutterBinding.ensureInitialized();
Workmanager().initialize(
// fungsi untuk memanggil callbackDispatcher
callbackDispatcher,
//Jika diaktifkan, pemberitahuan akan diposting setiap kali tugas berjalan.
//Hal ini berguna untuk proses debugging.
isInDebugMode: true);
Workmanager().registerPeriodicTask(
"2",
//Ini adalah nilai yang akan dikembalikan
//dalam callbackDispatcher.
"simplePeriodicTask",
//Jika tidak ada frekuensi yang diberikan,
//maka frekuensi default yang akan diatur adalah 15 menit.
//Frekuensi minimum yang dapat diatur adalah 15 menit.
//Jika Anda mengatur frekuensi yang lebih rendah,
//Android akan secara otomatis mengubah frekuensi menjadi 15 menit.
frequency: const Duration(minutes: 15),
);
runApp(const MyApp());
}
void callbackDispatcher() {
Workmanager().executeTask((task, inputData) {
// Menginisiasi plugin flutterlocalnotifications.
FlutterLocalNotificationsPlugin flip = FlutterLocalNotificationsPlugin();
//app_icon perlu ditambahkan sebagai
//sumber daya gambar (drawable resource)
//pada proyek dasar Android.
var android = const AndroidInitializationSettings('@mipmap/ic_launcher');
var iOS = const DarwinInitializationSettings();
// Menginisialisasi setting untuk android dan ios
var settings = InitializationSettings(android: android, iOS: iOS);
flip.initialize(settings);
_showNotificationWithDefaultSound(flip);
return Future.value(true);
});
}
Future _showNotificationWithDefaultSound(flip) async {
//Tampilkan notifikasi setiap 15 menit sekali
//dengan kemunculan pertama terjadi
//satu menit setelah metode dipanggil.
var androidPlatformChannelSpecifics = const AndroidNotificationDetails(
'your channel id',
'your channel name',
channelDescription: 'your channel description',
importance: Importance.max,
priority: Priority.high,
);
var iOSPlatformChannelSpecifics = const DarwinNotificationDetails(
subtitle: 'your channel subtitle',
interruptionLevel: InterruptionLevel.critical);
//menginisiasi channel platform untuk android dan ios
var platformChannelSpecifics = NotificationDetails(
android: androidPlatformChannelSpecifics,
iOS: iOSPlatformChannelSpecifics);
await flip.show(
0,
'Nextgen',
'Your are one step away to connect with Nextgen',
platformChannelSpecifics,
payload: 'Default_Sound');
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Nextgen',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(title: "Nextgen"),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State createState() => _HomePageState();
}
class _HomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(),
);
}
}
Output:
Tutorial sebelumnya : Flutter ImagePicker
Tutorial setelahnya : Restrict Landscape Mode Di Flutter
Semua Tutorial Flutter : Tutorial Flutter