Explore Firebase In-App Messaging In Flutter

Firebase Database is one of the best platforms for data storage in this we Firebase adds up messaging to the collection of products on the Firebase console. In-App Messaging connects all the active users who are already using our app. It sends a relevant message to the user and helps in interconnection and encourages users to use the feature of the app.

Hello friends, I will talk about my new blog on Explore Firebase In-App Messaging In Flutter. We will also implement a Firebase In-App Messaging In Flutter demo, describe his properties, and use them in your flutter applications. So let’s get started.

---

Table Of Contents :

Firebase In-App Messaging

Implementation

In-App Messaging Android Setup

Configuring Firebase Project

Code File

Conclusion

---

Firebase In-App Messaging :

Firebase In-App Messaging As the name suggests it works to send messages as I mentioned above it allows to send messages to all the active users as we have one application then the user To increase interconnection with each other, we send a message in the application to encourage the user to do something.

If a message can be configured dynamically so that the application will not need to update the message frequently, thereby prompting the active user to complete all the functions of in-app messaging by sending the message.

For Example:

Like buying an item or subscribing to content. This is also connected to firebase analytics and prediction to help you give custom and advance targeted messaging based on individual interest or engagement.

Demo Module :

---

Implementation :

You need to implement it in your code respectively :

Step 1: Add dependencies.

Add dependencies to pubspec — yaml file.

dependencies:
 firebase_in_app_messaging: ^0.5.0+4

dependencies:firebase_messaging: ^9.1.4

Step 2: import the package :

import 'package:firebase_in_app_messaging/firebase_in_app_messaging.dart';

import 'package:firebase_messaging/firebase_messaging.dart';

Step 3: Run flutter package get

Step 4: Classpath add to the[project]/android/build.gradlefile.

In-App Messaging Android Setup:

In your project-level build.gradle file, make sure to include Google’s Maven repository in both your buildscriptand allprojects sections.

Add the dependency for the In-App Messaging Android library to your module (app-level) Gradle file (usually app/build.gradle):

dependencies {
  // Add the google services classpath
  classpath 'com.google.gms:google-services'
}

Configuring Firebase Project:

To configure the project in firebase we will open the firebase console from which we will configure our project in-app messaging from which we will get a google service.json file which contains the configuration data that firebase uses internally To achieve this, we need a Firebase project so that we can further configure the project in Firebase, let’s see it in detail below.

Now we will open the firebase console to create a new project then click on add project card for the new firebase project, as soon as we click on the card, a new dialog opens in which we will set the name of our project and set the analytics location accordingly. As soon as we set the name of our project, then we will click on the Create Project button below.

for example, as shown in the image below.

After completing the first step a success message will appear indicating that we are ready for a new project

After this, in the next step, it asks whether you want to enable Google Analytics for the Firebase project or not, if yes, then enable it, although it is enabled by default, that click on the Continue button below to go to the next step

In the next step, you will enter the package name of the project by the way you can also enter the alias of the application Debug Certificate SHA-1.

After that the next step will come in the download config file, we will see there is a button on which to download google. Wrote service.json on which we will click and download it and add it to our flutter project.

Create Campaign:

When we create a new campaign then for that we have to open the firebase console after that these apps will navigate to messaging if any campaign is not in the account then click on create first campaign button and create a new campaign.

for example, as shown in the image below.

As soon as we click on the button then we are redirected to a new page now you can substitute a new campaign where we can choose the layout of our message what kind of message layout we want to make main It has 3 different layouts Model Image and Banner Message All of them have the same functionality and behavior.

Create a Campaign Message Properties:

1. Background: Using the background property, we can change the background of our dialog with a new color.
2. Text Colour: You can change the color of your given text in the text color property.
3. Title: The title attribute is a type of title text that we display in a campaign.
4. Body (Optional): The body property is used to display the main message of any dialog. This is optional.
5. Image URL (Optional): We use the image URL property when we want to show an image in any dialog. This is optional.

When we complete all these given fields then you can see a preview of the message in your firebase console.

for example, as shown in the image below.

Target Your Message:

Now you have to select the user to whom you want to message, who has some properties.

1. Campaign Name: In this, we will give the name of our campaign which is not visible to the user, it is used to track the campaign.
2. Campaign Description (Optional): The campaign Detail property is mainly optional The description in it is not visible to the user.
3. Target app and other conditions: This property specifies which message to show to the user.

for example, as shown in the image below.

Message Scheduling:

Can set campaign start date and end date using message scheduling There are many more optional things in this, there is a limit on showing messages, etc.

1. Start time: StartTime property This is used to set the start time of the message
2. End time: The end time property is used to specify the end time of the message given in the campaign.

for example, as shown in the image below.

Conversion Events (Optional):

Conversion Events This is kind of an optional field it allows to set the tag for click count.

for example, as shown in the image below.

Use the last step to add some key values ​​to add custom data which is optional.

Now you can finally publish it before publishing we can review it and make any changes and once it is published the campaign will be started.

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_in_app_messaging/firebase_in_app_messaging.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
class FireBaseInAppDemo extends StatefulWidget {
@override
_FireBaseInAppDemoState createState() => _FireBaseInAppDemoState();
}

class _FireBaseInAppDemoState extends State<FireBaseInAppDemo> {

void _instanceId() async {
await Firebase.initializeApp();
FirebaseMessaging.instance.getInitialMessage();
FirebaseMessaging.instance.sendMessage();
var token = await FirebaseMessaging.instance.getToken();
print("Print Instance Token ID: " + token!);
}

@override
void initState() {
super.initState();
_instanceId();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('In App Messaging Demo'),
),
body: Center(
child: RaisedButton(
child: const Text('In-App Messaging'),
onPressed: () {
FirebaseInAppMessaging.instance.triggerEvent("");

FirebaseMessaging.instance.sendMessage();

FirebaseMessaging.instance.getInitialMessage();
},
),
),
);
}
}

Conclusion:

In this article, I have explained an Explore Firebase In-App Messaging in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Explore Firebase In-App Messaging demo from our side.

I hope this blog will provide you with sufficient information on Trying up the Explore Firebase In-App Messaging in your flutter project. We showed you what the Explore Firebase In-App Messaging is and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.