How to Create Custom Push Notifications in FlutterFlow

Android 8+ requires notification channels before you can display categorized notifications. In FlutterFlow, open Custom Code > Custom Actions and create a new action called initNotificationChannels. This Dart code runs once at app startup and registers channels like 'orders', 'promotions', and 'alerts' with distinct importance levels. Each channel can have a different sound, vibration pattern, and lock-screen visibility. Without channels, all your notifications land in the default bucket with no customization possible.

1import 'package:flutter_local_notifications/flutter_local_notifications.dart';
2
3Future<void> initNotificationChannels() async {
4  final FlutterLocalNotificationsPlugin plugin =
5      FlutterLocalNotificationsPlugin();
6
7  const AndroidNotificationChannel ordersChannel = AndroidNotificationChannel(
8    'orders',
9    'Order Updates',
10    description: 'Notifications about your order status',
11    importance: Importance.high,
12    sound: RawResourceAndroidNotificationSound('order_chime'),
13  );
14
15  const AndroidNotificationChannel promoChannel = AndroidNotificationChannel(
16    'promotions',
17    'Promotions',
18    description: 'Deals and promotional offers',
19    importance: Importance.low,
20  );
21
22  await plugin
23      .resolvePlatformSpecificImplementation<
24          AndroidFlutterLocalNotificationsPlugin>()
25      ?.createNotificationChannel(ordersChannel);
26
27  await plugin
28      .resolvePlatformSpecificImplementation<
29          AndroidFlutterLocalNotificationsPlugin>()
30      ?.createNotificationChannel(promoChannel);
31}

When sending notifications via your Cloud Function or the Firebase Console, structure the payload to include both the notification object (for system tray display) and a data object (for your app logic). The notification object holds title, body, and image. The data object carries action type, target page, and any IDs your app needs for deep linking. Keeping these two objects separate ensures the notification displays correctly even when the app is closed, while your app still receives the data payload to navigate correctly when tapped.

1// Cloud Function payload example
2const payload = {
3  notification: {
4    title: 'Your order has shipped!',
5    body: 'Estimated delivery: Tomorrow by 5pm',
6    image: 'https://yourcdn.com/shipping-icon.png'
7  },
8  data: {
9    action: 'navigate',
10    target_page: 'OrderDetail',
11    order_id: orderId,
12    channel_id: 'orders'
13  },
14  android: {
15    notification: {
16      channel_id: 'orders',
17      sound: 'order_chime',
18      click_action: 'FLUTTER_NOTIFICATION_CLICK'
19    }
20  },
21  apns: {
22    payload: {
23      aps: {
24        sound: 'order_chime.aiff',
25        badge: 1
26      }
27    }
28  },
29  token: userFcmToken
30};

For iOS, place your .aiff sound file inside the Runner/Resources folder in your downloaded Flutter project, then re-upload via code export. For Android, place your .mp3 or .wav file in android/app/src/main/res/raw/. In FlutterFlow, go to Custom Files and upload the sound assets, specifying the correct platform path. Reference the sound by filename (without extension) in your Android channel setup and FCM payload. On iOS, the sound name in the APNS payload must exactly match the filename including the .aiff extension.

By default, FCM does not show a system notification when your app is in the foreground — it only delivers the message silently to your code. To show something to the user, add a Custom Action that subscribes to FirebaseMessaging.onMessage stream. When a message arrives, update a Page State variable (e.g., activeNotificationBanner) with the notification content. Wire this state variable to a conditionally visible banner widget at the top of your main scaffold. Use an AnimationController to slide the banner in, auto-dismiss it after 4 seconds, and let the user tap it to navigate to the target page.

1import 'package:firebase_messaging/firebase_messaging.dart';
2
3void listenForegroundMessages(
4  Future<void> Function(Map<String, dynamic> data) onMessage,
5) {
6  FirebaseMessaging.onMessage.listen((RemoteMessage message) async {
7    final data = {
8      'title': message.notification?.title ?? '',
9      'body': message.notification?.body ?? '',
10      'action': message.data['action'] ?? '',
11      'target_page': message.data['target_page'] ?? '',
12      'payload': message.data,
13    };
14    await onMessage(data);
15  });
16}

Android supports up to three action buttons on notifications without the user needing to open the app. In your Android channel-aware payload, add an android.notification.actions array with title and action fields. In your app's notification tap handler (FirebaseMessaging.onMessageOpenedApp), check the action field on the message to determine which button was tapped and execute the right logic — for example 'Mark as Read' vs 'View Details'. Register these action categories in your custom notification setup code.