Notification Dropdown

Mounting the Bell#

import 'package:flutter/widgets.dart' hide Notification;
import 'package:magic/magic.dart';
import 'package:magic_notifications/magic_notifications.dart';

Widget notificationBell() {
  return NotificationDropdown(
    notificationStream: Notify.notifications(),
    onMarkAsRead: (String id) => Notify.markAsRead(id),
    onMarkAllAsRead: () => Notify.markAllAsRead(),
    onNotificationTap: (DatabaseNotification notification) {
      final String? url = notification.actionUrl;
      if (url != null) MagicRoute.to(url);
    },
    // `/notifications` is the host's own route to the inbox screen.
    onViewAll: () => MagicRoute.to('/notifications'),
  );
}

The widget holds no state of its own and calls no backend: it renders whatever notificationStream emits and hands every action to a callback. Notify.notifications() emits the manager's held list at once and every later change, so the bell fills once something reads the inbox (Notify.fetchNotifications(), Notify.startPolling() or Notify.startRealtime(channel: ...); realtime answers false and reads nothing without a channel or a broadcast driver, so keep polling then), and Notify.markAsRead changes the held list before the request, so the badge drops on the tap.

Constructor Parameters#

What the Panel Shows#

The panel is capped at 400 logical pixels high and scrolls inside. Every string comes from a translation key the host supplies; Translation Keys lists them with English reference copy.

Restyling#

The defaults are Wind's own palette (bg-white, text-gray-500, bg-red-500). Each className parameter replaces its default outright rather than appending to it, so an override restates the layout tokens and the dark: pair it still wants. The defaults are exported as kNotificationDropdown*ClassName constants to read from.

import 'package:flutter/widgets.dart' hide Notification;
import 'package:magic_notifications/magic_notifications.dart';

Widget compactBell() {
  return NotificationDropdown(
    notificationStream: Notify.notifications(),
    triggerClassName:
        'w-9 h-9 rounded-lg flex items-center justify-center '
        'bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800',
    triggerIconClassName: 'text-[18px] text-gray-500 dark:text-gray-400',
    triggerHitClassName: 'w-11 h-11 flex items-center justify-center',
    panelOffset: const Offset(-4, 0),
  );
}

A 36 pixel trigger centred in a 44 pixel tap box: the panel anchors to the whole box, so panelOffset pulls it back by the box's inset to line it up with the drawn trigger. The badge count is clamped to a maximum text scale whatever badgeClassName says, so a taller pill scales less than it could but never clips.

Type Icons#

Each row leads with the icon registered for its type in the notifications.icon slot family, then with the default slot, then with a neutral bell. The inbox screen reads the same slots.

import 'package:flutter/widgets.dart' hide Notification;
import 'package:magic/magic.dart';
import 'package:magic_notifications/magic_notifications.dart';
// The host adds material_ui to its own pubspec for `Icons`.
import 'package:material_ui/material_ui.dart' show Icons;

void registerTypeIcons() {
  Notify.view.slot(
    NotificationViewRegistry.typeIconSlotView,
    'monitor_down',
    (BuildContext context) {
      return WIcon(
        Icons.error_outline,
        className: 'text-lg text-red-500 dark:text-red-400',
      );
    },
  );
}

Gotchas#

Related Documentation#

• Preferences: the preferences screen, PushPrompt and the translation keys.
• Notification Manager: the held list behind Notify.notifications() and the optimistic read-state changes.
• Configuration: polling_interval, which sets how often a polling bell refreshes.