How to send notifications in your flutter app with ApparenceKit

Send remote notifications

Remote notifications are notifications sent from your backend server using firebase cloud messaging.

Don't worry we got you covered. ApparenceKit provides an easy way to send remote notifications.

☁️ Using Supabase backend provider

To send a notification to a user, you can use the following code:

const notification = Notification.fromData({
  userId: user_id, // The user's ID
  content: new TextNotificationContent(
    translate({ key: "tile_removed", language: userInfo.language }),
    translate({ key: "tile_removed_description", language: userInfo.language }),
  ),
  creation_date: new Date(),
  data: {
    type: "MY_NOTIFICATION_TYPE", // The type of the notification
  },
}, supabase);

await notification.save();

• content is the title and body of the notification
• creation_date is the date and time the notification was created
• data is the data of the notification (optional) it can be used to store additional data for the notification so you can later use it to filter the notifications or use it in the notification itself
• supabase is the supabase client

then just call save

await notification.save();

Note: the user locale is available in the user entity as locale property

👉 This will save the notification in the database and send it to the user automatically (a trigger is setup to send the notification to the user on insert in the notifications table)

or you can directly send the notification to the user by calling the send method

await notification.send();

(it will not save the notification in the database)

📦 Translations

Translations are stored in the _core/translations.ts file. You can add more translations for your app by adding more keys to the translations object.

const translations: Translations = {
  "en": {
    "tile_removed": "Oh no! You lost a building!",
  },
};

• key is the key of the translation
• language is the language of the translation
• params is an object with the parameters of the translation

const translation = translate({ key: "tile_removed", language: "en" });

👉 if the translation is not found, it will return the translation for the default language (en)

Translations params

You can use params in the translations to insert dynamic values in the translation.

const translations: Translations = {
  "en": {
    "hello": "Hello {name}!",
  },
};

const translation = translate({ key: "hello", language: "en", params: { name: "John" } });

👉 the translation will be "Hello John!"

You can use this within your notifications to personalize the notification for the user.

---

🔥 Using Firebase backend provider

To send a notification to a user, you can use the following code:

import {notificationsApi} from "../notifications/notifications_api";
...

await notificationsApi.notify(
  [userId],
  <SystemNotificationParams> {
    title: "Subscription saved",
    body: "Thank you",
  },
);

• The first parameter is an array of user IDs to send the notification to
• The second parameter is the notification content (title and body)
• notification will be automatically saved in the database and sent to the user (if has a valid device token)

---

Schedule local notifications

Local notifications are notifications that are scheduled to be shown at a specific time on the user's device. Those notifications are schedule directly on the device and do not require a backend server.

Note: user must have granted permission to show notifications for local notifications to work.

Schedule a daily notification

final localNotifier = ref.read(localNotifierProvider);

localNotifier.scheduleDailyAt(
  notificationId: 150000, // unique id for the notification, you can use any number
  title: translations.dailyNotification.title,
  body: translations.dailyNotification.body,
  hour: reminder.hour,
  minute: reminder.minute,
);

the local notifier also provides other methods to schedule notifications

• scheduleWeekly let you schedule a notification on specific days of the week
• scheduleAt let you schedule a notification at a specific date and time
• scheduleFromNow let you schedule a notification after a specific duration from now
• listPendingNotifications let you list all the pending scheduled notifications
• cancel let you cancel a scheduled notification by its id
• cancelAll let you cancel all scheduled notifications

💡 local notifier handle timezone automatically for you.

---

Handle on notification tap

To handle notification tap actions, you can use the onTap method of the Notification.dart class

Future<void> onTap() async {
    ...
    // If you want to open a link when the notification is tapped
    if (type == NotificationTypes.LINK && data?.containsKey('url') == true) {
      try {
        launchUrl(Uri.parse(data!['url'] as String));
      } catch (e, s) {
        Logger().e("error $e");
        Sentry.captureException(e, stackTrace: s);
      }
      return;
    }
    ....

}

• You can check the notification type and perform different actions based on the type
• You can also access the notification data to get additional information about the notification
• By default we handle link notifications by opening the url in the notification data (useful for sending survey or promotional notifications)