Push Notification Tutorial on Flutter Using Firebase Cloud Messaging for Beginners

Push notification is one way to provide realtime information to our application users. Push notification is often used by the applications that we currently use. For example, at the time of payment, you get a notification "payment was successful" when you have paid. Why is this tutorial using firebase? the answer is only 1, free, haha. Oh yes, this tutorial is specifically for beginners, so for those of you who already know a lot, maybe you can immediately look at the navigation button in the lower right corner, yes, there is a list of headings. Thank you

1. Firebase Setup

Before we start this tutorial, we have to create a project on firebase using our google account.

1. Visit page firebase.google.com 
2. Then press the sign in, button to enter to your account
3. After successfully logged in, you can press the button go to console.
   
   
   
4. Then press button Create a project
   
   
   
5. Fill in everything correctly
   
   
   i filled it like this
   
   
   
6. You can continue this by activating Google Analytics or not. If you use google analytics, then later when using flutter you have to install firebase_analytics in your flutter package
   
   
   
7. Start building your project with your location
   
   
   
8. And, congratulations. Project has been created

2. Create New Flutter Project

1. Select the folder or directory you want on your command line
2. Then run flutter create with the project name you want. An example like this
   
   

   flutter create push_notification

3. Wait for it to finish and open it with VS Code li>

3. Install Firebase CLI

1. You can use npm (If you are confused about installing npm you can install node.js first.) to install firebase cli, use the following command
   
   

   npm install -g firebase -tools

4. Firebase Login

1. After installing firebase cli, you are required to login to your project first by running the command:
   
   

   firebase login 

2. After that you can continue logging in using your Google account

5. Install Flutter Fire Command Line

1. Enter your flutter project
2. Run
   
   

   dart pub global activate flutterfire_cli

   
   
3. For those of you who use mac, you can export the path to your .zshrc file with method
   Open the file in ~/.zshrc then add the following code
   
   

   export PATH="$PATH":"$HOME/.pub-cache /bin"

6. Configure Flutter Project

1. Install firebase_core in your flutter project by running the cli below
   
   

   flutter pub add firebase_core code>

2. Install firebase_messaging in your flutter project by running the cli below
   
   

   flutter pub add firebase_messaging code>

3. For those of you who have activated google analytics, please install firebase_analytics by running the cli below
   
   

   flutter pub add firebase_analytics

4. After everything is installed you can use the android, apk, web, and desktop platform setup easily because we already use flutterfire. So what what we do now is run the cli below
   
   

   flutterfire configure

   
   
5. After the above four steps are completed, you will get the file firebase_options.dartautomatically.
6. Import the two files below to initialize in your lib/main.dart file.
   
   import 'package:firebase_core/firebase_core.dart'; import 'package:learn_pn/firebase_options.dart';
7. Initialize the void main method in the lib/main file your .dart . For example as below:
   
   

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(
       options: DefaultFirebaseOptions. currentPlatform,
     );
   
     runApp(const MyApp());
   }

7. Running Push Notification on Background Process

After the flutter project configuration is complete. You can receive background messages or even foreground messages in your application. Here are the steps.

1. Add request permission and get the token with the code below in method main in file lib/main.dart You. for example like this
   
   

   await _firebaseMessaging.requestPermission();
   final fcmToken = await FirebaseMessaging.instance.getToken();

   Example full method main
   
   

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(
       options: DefaultFirebaseOptions. currentPlatform,
     );
     await _firebaseMessaging. requestPermission();
     final fcmToken = await FirebaseMessaging.instance.getToken();
     debugPrint("fcm token: $fcmToken");
   
     runApp(const MyApp());
   }

2. Create a method to handle background messages, this method must be top-level which means it must be outside of other classes or methods.
   

   Future handleBackgroundMessage(RemoteMessage message) async {
     print("title: ${message. notification?. title}");
     print("body: ${message. notification?. body}");
     print("payload: ${message.data}");
   }

3.