As for the Wikipedia,
Firebase Cloud Messaging, formerly known as Google Cloud Messaging, is a cross-platform cloud solution for messages and notifications for Android, iOS, and web applications
I think that explains the whole purpose of using FCM. Even most of the AWS users use FCM for their messaging and notification needs, just for the easiness that brings to the developer. In addition, lately people trend to use data notifications to replace socket programming that was using mainly for realtime updates. Most of all, it is a completely free service, at least for now. So most of the startups, small businesses can benefit from that service.
Setting up FCM in flutter is not a hard thing. Anyone with an IDE can do it just by reading their documentation. If you haven’t done it to your project, follow the below link and setup your Flutter app for FCM.
To move forward in this article, simple knowledge in BLoC pattern would be recommended. If you need a quick go though, you can refer the link below. For this project, I will be using the BLoC implementation by @Felangel.
In addition, you should have a pre configured project for FCM. Also, knowledge about Flutter navigation is an essential.
For this, I will create an app with 2 view. One will have a list of documents from a Firestore collection. When you click on a list item, it will navigate to the second view and show the information in the document.
First I will talk about the second view. It should take a DocumentReference as a parameter and show it’s detials in its view. For that purpose, I will directly use this article I wrote.
Then for the first page, I will create a ListView to show the list of DocumentReferences and, when you click one of them, it will navigate to the second page.
For this BLoC, you will need an Event to add DocumentReferences and, the BLoC’s state should tell us whether we need to navigate to the SecondPage or not. The following code must be straight forward if you have a basic knowledge to use the above mentioned implementation of BLoC.
When sending notification, you have to use the extra parameter userRef with the data that is sending. That parameter should contain the path to the document that should show in the SecondPage when clicked on the notification. Take a look at the following article to learn how to use Postman to send test notifications to the app. Make sure to add userRef variable with a correct path to a document in a Firestore collection.
Once the event was added, it should be processed in the UtilBloc and set the appropriate state.
This will set the state to NoNavigation when the event received with an empty or null path to a Firestore document. But if there is a value in the path, it should set the state to NavigateToSecond with the relevant DocumentReference.
You can use the method in the article that mentioned above to trigger manual notifications to the app. When you click on a notification, you will see that the app is starting normally and going to the home page. Also, you will see that “on resume” or “on launch” statements are printed in the console. What is remaining is to trigger a navigation to the SecondPage by looking at the state of this BLoC at the home page of our app.
Before actually navigating to the second view, you should reset the state of the BLoC so that the BlocBuilder will not execute the navigation code on every time it rebuilds. For other ways of handling this navigation, you can refer to this github issue and this article in the bloc documentation.
You can go to the following link to view the whole code.
https://gist.github.com/Ramesh-X/fba266d526e1322cba1931110cf06a35
I don’t say that this is the only way of handling navigation on notification click in Flutter. There might be hundreds of ways, which will even better than this. If you came across a better implementation by yourself, or you saw a better approach on the internet, just leave a comment so that I also can learn it.
