I'm working on a Flutter Web application which utilizes a Pomodoro timer. My current task is to implement browser notifications to alert the user when a timer (Pomodoro, Short Break, or Long Break) reaches zero. The user should be able to toggle this feature on and off.
I've implemented the toggle functionality using Riverpod. The notificationToggleProvider
provides the state of the toggle:
final notificationToggleProvider = StateProvider<bool>((ref) => true);
And here is the ListTile with the switch that toggles notifications:
ListTile(
title: const Text('Enable Notifications'),
trailing: Switch(
value: ref.watch(notificationToggleProvider.notifier).state,
onChanged: (value) =>
ref.read(notificationToggleProvider.notifier).state = value,
),
),
However, I'm encountering some difficulties with the notifications part. Even when the toggle is on (i.e., the notificationToggleProvider
state is true
), I'm not receiving any browser notifications. I'm using the flutter_local_notifications
package version 15.1.0+1 for notifications.
Here is my current implementation for displaying notifications (contained within the showNotification
method):
Future<void> showNotification(String title, String body) async {
final bool areNotificationsEnabled = ref.read(notificationToggleProvider.notifier).state;
if (areNotificationsEnabled) {
var androidPlatformChannelSpecifics = AndroidNotificationDetails(
'timer_channel_id',
'Timer notifications',
importance: Importance.max,
priority: Priority.high,
);
var platformChannelSpecifics = NotificationDetails(
android: androidPlatformChannelSpecifics,
);
await flutterLocalNotificationsPlugin.show(
0,
title,
body,
platformChannelSpecifics,
);
}
}
I've made sure to call this showNotification method along with playSound whenever a timer finishes:
await showNotification(notificationTitle, notificationBody);
await playSound(userTriggered: false);
I need help figuring out why the browser notifications aren't displaying as expected when the toggle is on.
I appreciate any help in resolving this issue.