🔥 Firebase CLI Configuration in Flutter (with Push Notification Setup)

Integrating Firebase into your Flutter app using the Firebase CLI is one of the fastest and cleanest ways to manage your project’s backend. This guide walks you through configuring Firebase and setting up Firebase Cloud Messaging (FCM) for push notifications.

🛠 Step 1: Install Required Tools

Before you begin, make sure you have Node.js installed.

✅ Install Firebase CLI

npm install -g firebase-tools

✅ Install FlutterFire CLI

dart pub global activate flutterfire_cli

⚙️ Step 2: Configure Firebase with Flutter

In the root directory of your Flutter project, run:

flutterfire configure

• Select an existing Firebase project or create a new one

• Choose platforms (Android, iOS, Web, macOS)

• This will generate firebase_options.dart in your lib/ folder

🧪 Step 3: Initialize Firebase in main.dart

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'firebase_options.dart';
import 'services/notification_service.dart';
import 'app.dart';

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  debugPrint("Handling background message: ${message.notification?.title}");
  await NotificationService().handleBackgroundNotification(message);
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initializeFirebase();
  await NotificationService().init();

  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

  String? token = await FirebaseMessaging.instance.getToken();
  debugPrint("FCM Token: $token");

  runApp(const MyApp());
}

Future<void> initializeFirebase() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
}

🔔 Step 4: Create Notification Service

Create services/notification_service.dart: import 'package:firebase_messaging/firebase_messaging.dart'; import 'package:flutter_local_notifications/flutter_local_notifications.dart';

class NotificationService {
  static final NotificationService _instance = NotificationService._internal();
  factory NotificationService() => _instance;
  NotificationService._internal();

  final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
      FlutterLocalNotificationsPlugin();

  Future<void> init() async {
    const androidSettings = AndroidInitializationSettings('@mipmap/ic_launcher');
    const iosSettings = DarwinInitializationSettings();

    const initSettings = InitializationSettings(
      android: androidSettings,
      iOS: iosSettings,
    );

    await flutterLocalNotificationsPlugin.initialize(initSettings);

    await FirebaseMessaging.instance.requestPermission(
      alert: true,
      badge: true,
      sound: true,
    );

    FirebaseMessaging.onMessage.listen(showNotification);
    FirebaseMessaging.onMessageOpenedApp.listen(showNotification);
  }

  Future<void> showNotification(RemoteMessage message) async {
    if (message.notification == null) return;

    const androidDetails = AndroidNotificationDetails(
      'high_importance_channel',
      'High Importance Notifications',
      importance: Importance.max,
      priority: Priority.high,
    );

    const iosDetails = DarwinNotificationDetails();

    const notificationDetails = NotificationDetails(
      android: androidDetails,
      iOS: iosDetails,
    );

    await flutterLocalNotificationsPlugin.show(
      message.notification.hashCode,
      message.notification?.title,
      message.notification?.body,
      notificationDetails,
    );
  }

  Future<void> handleBackgroundNotification(RemoteMessage message) async {
    await showNotification(message);
  }
}

✅ Final Checklist

• Firebase initialized using CLI

• FCM configured with token logging

• Notifications handled in both background and foreground

📌 Tips

• Ensure google-services.json (Android) or GoogleService-Info.plist (iOS) is correctly added.

• Test push notifications on physical devices (emulators may block them).

💬 Need Help?

For issues or advanced setups (like custom sounds, channels, navigation), feel free to reach out.

Check out the full source code here: GitHub Repository