Flutterflow: Customized Push Notifications

🚀 Hey, Flutterflow community! Today, I'm going to talk about an essential topic in app development: PUSH notifications. They're like the secret sauce for keeping users engaged, delivering important info even when the app is inactive.

Why are PUSH notifications so crucial? Just imagine: you have an amazing app, but users only remember to open it occasionally. With PUSH notifications, you can keep them active by sending reminders, updates, and relevant content directly to their phones, boosting interaction and loyalty.

Now, if you're building your app with Flutterflow, remember: for native PUSH notification setup to work, you need to use Firebase Auth. This is especially important if you're developing an app that consumes API authentication entirely.

Check out the step-by-step guide to set everything up:

1. Creating a Persistent App State

2. Creating Custom Action

3. Adding Custom Action to main.dart

4. Compiling and Testing

Creating a Persistent App State

To control the notification token generated by the SDK for this app and use it for individual triggers, having a persistent App State is crucial. This way, you can efficiently store these tokens.

Creating Custom Actions

Go to the Flutterflow menu, click on Custom Code, and create a new action called initPushNotification. Here, you'll configure Firebase Messaging and Firebase In-App Messaging within the Pubspec Dependencies.

// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:firebase_in_app_messaging/firebase_in_app_messaging.dart';

Future initPushNotification() async {
  String? token = '';
  if (!isWeb) {
    final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;
    final FirebaseInAppMessaging fiam = FirebaseInAppMessaging.instance;
    NotificationSettings settings = await _firebaseMessaging.requestPermission(
      alert: true,
      badge: true,
      sound: true,
    );
    if (settings.authorizationStatus == AuthorizationStatus.authorized) {
      print('Permisos de notificação concedidos');
    } else {
      print('Permisos de notificação denegados');
    }
    // Configurar os eventos
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Mensagem recibido: ${message.notification?.title}');
    });

    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print(
          'Aplicación abierta desde una notificación: ${message.notification?.title}');
    });

    FirebaseMessaging.onBackgroundMessage((RemoteMessage message) async {
      print('Message onBackground ${message}');
    });
    try {
      if (isAndroid) {
        token = await _firebaseMessaging.getToken();
      } else {
        token = await _firebaseMessaging.getAPNSToken();
      }
      if (token != null) {
        FFAppState().pushKey = token;
        print(token);
      }
    } catch (e) {
      print('Error getting APNS token: $e');
      return 'Error';
    }
  }
  }
}

The code above registers the Firebase Messaging library, generating a token that will be saved in the pushKey variable if the user grants the necessary permissions.

Adding the Custom Action to main.dart

After creating your Custom Action, it's time to integrate it into your app. Access the main.dart file and add the initPushNotification action to the Final Actions section. This way, the PUSH notification setup will work smoothly when the app is launched.

Compile and Test

After following the previous steps, compile your app and test it on your mobile device. Don't forget to accept the notification permissions when prompted. Then, straight from the Firebase console, you can send PUSH notifications to your users easily and effectively.

I hope these tips help you on your journey with Flutterflow. If you have any questions or need more information, just drop a comment!

Let's code with FLOW! 🎉