How to add push notifications to your FlutterFlow project?

Step 1: Create Your FlutterFlow Project

Before adding push notifications to your project, you need to have an existing project on FlutterFlow. For creating one, visit the FlutterFlow website, sign in with your account, go to the dashboard and click "New Project". Name your project and pick a template if required, or start from scratch.

Step 2: Navigate to Project Settings

Once you have created your application, navigate to the project section. On the left sidebar, click on the last icon named "Settings", it will redirect you to the project settings page.

Step 3: Enable Push Notifications

Scroll down to the "Push Notifications" section. Here you will see a toggle button to enable or disable the notifications for your project. Once you have enabled it, two input fields will appear, asking for the Server API Key and the Sender ID.

Step 4: Obtain Server API Key and Sender ID from Firebase

To get these keys, you must set up a project on Firebase:

• Go to the Firebase console and create a new project. If you already have a project for your app, you can use it.
• After your project is created, click on the project settings (the gear icon next to "Project Overview").
• Go to the "Cloud Messaging" tab, here you will find your Server Key and Sender ID.

Step 5: Add Server API Key and Sender ID to FlutterFlow

Go back to your FlutterFlow project, and paste the Server Key and Sender ID into the appropriate fields. After this, save it.

Step 6: Download google-services.json File

• Go back to your Firebase Console, and click on the Android icon in your project overview (to add an Android application to your Firebase project).
• Register your app by providing the app package name. Your app's package name is the application ID with which your app is uniquely identified. You can find your package name in the AndroidManifest.xml file in your project.
• Download the google-services.json file provided by Firebase.

Step 7: Add google-services.json File to FlutterFlow

Go back to your FlutterFlow project:

• Navigate to Project Settings.
• Scroll down to the Firebase Config section.
• Click on the "Upload File" button and select the google-services.json file you just downloaded from Firebase.

After this, save it, and you are all set.

Step 8: Send Test Push Notification

To test if your notifications are functioning as expected, you can send a test notification from FlutterFLow:

• Go back to your project.
• On the left sidebar, click the bell icon to open the "Push Notifications" page.
• Click "New Notification" and fill in the details for your test notification.
• Click "Send Test Notification" and check your mobile device for the notification.

Step 9: Configuring Notifications within Your App

Remember, you also need to configure specific parts of your app to handle these push notifications. This step involves coding in your Flutter application. Below is a basic example of how to set up a handler for when a user taps on a notification:

• Use the firebase_messaging package from Flutter to set up the handler.

FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
  print('Message clicked!');
});

This will print "Message clicked!" to the console whenever a user taps a notification that brings them back into the app.

You've now set up push notifications for your FlutterFlow project!