Adding Real-Time Analytics with Firebase Analytics 10.x in Flutter

Introduction

Real-time analytics are crucial for understanding user behavior and making data-driven decisions in mobile development. With Firebase Analytics 10.x and Flutter, you can seamlessly log events, set user properties, and view live data in the Firebase console’s DebugView. This tutorial walks through configuration, integration, custom event logging, screen tracking, and leveraging real-time dashboards using the latest Firebase Analytics SDK in a Flutter app.

Project Setup with Firebase Analytics 10.x

1. Create or open your Firebase project at console.firebase.google.com.

2. Add an Android and/or iOS app, then download google-services.json (Android) or GoogleService-Info.plist (iOS).

3. Place these files in your Flutter project under android/app/ and ios/Runner/ respectively.

4. Update Gradle (Android) and Podfile (iOS) to use Google services plugins and Firebase BOM 31.1.0+:

   android/build.gradle:
   dependencies { 
     classpath 'com.google.gms:google-services:4.3.15'
    }
   
   android/app/build.gradle:
   dependencies { 
     implementation platform('com.google.firebase:firebase-bom:31.1.0')
     implementation 'com.google.firebase:firebase-analytics'
    }

   
   

5. For iOS, run pod install in ios/ directory after adding pod 'Firebase/Analytics' to your Podfile.

Integrating Firebase Analytics in Flutter

Add the Flutter plugin to your pubspec.yaml:

dependencies: 
    flutter:
      sdk: flutter
    firebase_core: ^2.15.0
     firebase_analytics

Initialize Firebase in main.dart before running the app:

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Then instantiate the analytics instance once, ideally at the top level:

final FirebaseAnalytics analytics = FirebaseAnalytics.instance;

Logging Custom Events

Custom events let you capture user interactions beyond predefined events. Use the logEvent API to send key-value pairs:

void logPurchase(String itemId, double price) {
  analytics.logEvent(
    name: 'purchase',
    parameters: {
      'item_id': itemId,
      'price': price,
      'currency': 'USD'
    },
  );
}

Call this method whenever a user completes a purchase, views a product, or performs any action you wish to track. Firebase automatically batches and uploads events in the background, optimizing network usage.

Setting User Properties and Tracking Screens

User properties provide context about user segments. Screen tracking helps identify where users spend time.

Set a property:

analytics.setUserProperty(name: 'preferred_language', value: 'en');

Track screen views manually when you’re not using Navigator observers:

void logScreenView(String screenName) {
  analytics.logScreenView(
    screenClassOverride: screenName,
    screenName: screenName,
  );
}

Alternatively, you can integrate a RouteObserver<ModalRoute> to automatically report screen changes:

class AnalyticsRouteObserver extends RouteObserver<ModalRoute<dynamic>> {
  void didPush(Route route, Route? previousRoute) {
    if (route.settings.name != null) {
      analytics.logScreenView(
        screenName: route.settings.name,
        screenClassOverride: route.settings.name,
      );
    }
  }
}

Register this observer in your MaterialApp:

MaterialApp(
  navigatorObservers: [AnalyticsRouteObserver()],
  // ...
)

Utilizing Real-Time Dashboard View

Firebase DebugView provides real-time visibility into events from a development device. To enable it:

1. Connect your device via USB or use an emulator.

2. For Android, run: adb shell setprop debug.firebase.analytics.app your.package.name.

3. For iOS, add -FIRDebugEnabled flag in Xcode’s Scheme > Arguments.

4. Go to Analytics > DebugView in Firebase console.

Now, any logEvent, screen view, or property you set will appear within seconds. Use DebugView to verify event names, parameters, and user properties before deploying to production.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

Integrating Firebase Analytics 10.x in your Flutter app equips you with powerful, real-time insights into user behavior. From project setup to custom events, screen tracking, and DebugView, these tools help you optimize user flows and drive engagement. By following best practices—structuring event names, batching logs, and verifying with DebugView—you’ll build a robust analytics foundation for any mobile development project.