Detach push notifications from flutterflow

·

2 min read

Detach  push notifications from flutterflow

What's the goal?

Flutterflow is great(if you don't know how to build apps with flutter), but the shit relies on Firebase too much. I wanted to have auth and notifications running from my backend service. But Flutterflow as of writing this document only permits you to publish from within the app or from their dashboard. Which didn't work for my use case of sending out order updates.

Solution

This is a janky solution. But it works. Installing firebase_messaging as a dependency from a custom action didn't work for me. Your mileage may vary. Mail me at if there is a better way to do this.

  • Set up Firebase auth. This is still needed. Enable and use anonymous login as provider. It's not mandatory to implement the actual login login on a page.

  • Make a new custom action

      // Custom action: getFCMKey
    
      import 'package:firebase_messaging/firebase_messaging.dart';
    
      Future<String?> getFCMKey() async {
        return await FirebaseMessaging.instance.getToken();
      }
    
  • Configure the action call just before your login flow(or any API call that you know will identify the user) and add the output of the action call as an additional parameter in the API call.

  • Save it in your backend.

  • Now you can call the Firebase API and send notifications. Setting initialPageName lets you open a specific page and parameterData is a JSON encoded payload whose params are used as route params while loading the page. For eg, here my page route is /onboarding/:id.

    Note: initialPageName is the page name, not the route param.

      // PHP Sample that I was using
    
      Artisan::command('test_fcm {id}', function ($id) {
          $token = "fEiQmq4pS7GXnBQUHpkX9R:....";
          $factory = (new Factory)->withServiceAccount('resources/keys/firebase.json');
          $messaging = $factory->createMessaging();
          $notification = Notification::fromArray([
              'title' => "Batch is live!",
              'body' => "We are now accepting orders for Lunch",
          ]);
          $deviceTokens = [$token];
          $message = CloudMessage::new()
              ->withNotification($notification)
              ->withData([
                  "initialPageName" => "OnboardingX",
                  "parameterData" => json_encode([
                      "id" => (int) $id,
                  ]),
              ]);
          $messaging->sendMulticast($message, $deviceTokens);
      });
    
  • I haven't tested it yet, but I think using this action should help with bulk topic broadcasts too.

// Custom action: subscribeToTopics

import 'package:firebase_messaging/firebase_messaging.dart';

Future subscribeToTopics(List<String> topics) async {
  topics.forEach((topic) async {
    await FirebaseMessaging.instance.subscribeToTopic(topic);
  });
}