Boosting app engagement with real-time push notifications using Flutter & Firebase.

 

Boosting App Engagement with Real-Time Push Notifications & Live Chat using Flutter & Firebase

Introduction

In today's digital world, real-time interaction is key to user engagement. Push notifications and live chat features can significantly enhance user experience and keep them engaged with your app. In this blog, we'll explore how to implement push notifications using Awesome Notifications and real-time chat using Firebase in a Flutter application.

---

Why Use Push Notifications & Live Chat?

Push Notifications

• Instantly notify users about updates, promotions, or messages.
• Increase user retention by keeping them engaged.
• Improve app interaction with personalized alerts.

Live Chat

• Provide instant support and communication.
• Enhance user experience with real-time messaging.
• Increase app usage and engagement.

---

Setting Up Firebase in Flutter

Before integrating push notifications and chat, we need to set up Firebase in our Flutter project.

Step 1: Create a Firebase Project

1. Go to Firebase Console.
2. Click Add Project and follow the setup process.
3. Enable Firebase Cloud Messaging (FCM) for push notifications.
4. Enable Firebase Firestore for real-time chat.

Step 2: Integrate Firebase with Flutter

1. Add Firebase dependencies to pubspec.yaml:

  dependencies:
    firebase_core: latest_version
    firebase_messaging: latest_version
    cloud_firestore: latest_version
    firebase_auth: latest_version

2. Run flutter pub get to install dependencies.
3. Follow the Firebase setup guide for Android & iOS.

---

Implementing Push Notifications with Awesome Notifications

Step 1: Install Awesome Notifications

Add this dependency to your pubspec.yaml:

  dependencies:
    awesome_notifications: latest_version

Run flutter pub get.

Step 2: Initialize Notifications

In your main.dart, initialize the notification system:

import 'package:awesome_notifications/awesome_notifications.dart';

void main() {
  AwesomeNotifications().initialize(
    'resource://drawable/ic_launcher',
    [
      NotificationChannel(
        channelKey: 'basic_channel',
        channelName: 'Basic Notifications',
        channelDescription: 'Notification channel for basic alerts',
        defaultColor: Color(0xFF9D50DD),
        ledColor: Colors.white,
      )
    ],
  );
  runApp(MyApp());
}

Step 3: Request Permissions

Ask for user permission to receive notifications:

AwesomeNotifications().isNotificationAllowed().then((isAllowed) {
  if (!isAllowed) {
    AwesomeNotifications().requestPermissionToSendNotifications();
  }
});

Step 4: Send a Notification

AwesomeNotifications().createNotification(
  content: NotificationContent(
    id: 10,
    channelKey: 'basic_channel',
    title: 'Hello User!',
    body: 'This is a test notification',
  ),
);

---

Implementing Firebase Live Chat

Step 1: Authentication

Use Firebase Authentication to manage user login.

final FirebaseAuth auth = FirebaseAuth.instance;

Future<User?> signInAnonymously() async {
  UserCredential userCredential = await auth.signInAnonymously();
  return userCredential.user;
}

Step 2: Firestore Database Structure

Firestore will store chat messages with the following structure:

messages (collection)
   |-- message_id (document)
       |-- sender: "User A"
       |-- text: "Hello!"
       |-- timestamp: "2024-02-01 10:30:00"

Step 3: Sending Messages

final FirebaseFirestore firestore = FirebaseFirestore.instance;

Future<void> sendMessage(String message, String sender) async {
  await firestore.collection('messages').add({
    'sender': sender,
    'text': message,
    'timestamp': FieldValue.serverTimestamp(),
  });
}

Step 4: Retrieving Messages in Real-Time

Stream<QuerySnapshot> getMessages() {
  return firestore.collection('messages').orderBy('timestamp').snapshots();
}

Step 5: Displaying Messages

StreamBuilder(
  stream: getMessages(),
  builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
    if (!snapshot.hasData) return CircularProgressIndicator();
    return ListView(
      children: snapshot.data!.docs.map((doc) {
        return ListTile(
          title: Text(doc['sender']),
          subtitle: Text(doc['text']),
        );
      }).toList(),
    );
  },
)

---

Conclusion

With Awesome Notifications and Firebase Live Chat, you can significantly improve app engagement. Notifications keep users informed, while live chat fosters real-time interaction. Try implementing these features in your Flutter app and watch user engagement grow!

🚀 Happy Coding!