Integrating Crashlytics and In‑App Messaging in Flutter

Introduction

Flutter Firebase Crashlytics delivers real-time crash reporting for Flutter apps. Integrating Crashlytics and In-App Messaging helps you detect stability issues, deliver contextual messages, and guide users through errors or feature updates—all without leaving the app. In this tutorial, you’ll learn how to set up the Crashlytics Flutter SDK, customize crash reports, and combine them with Firebase In-App Messaging for targeted feedback loops.

Setup: Adding Crashlytics to Your Flutter App

Begin by adding the core dependencies to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.0.0
  firebase_crashlytics: ^3.0.0
  firebase_in_app_messaging

Run flutter pub get, then initialize Firebase and Crashlytics in main.dart:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;
  runApp(MyApp());
}

On Android, update your android/app/build.gradle:

• Apply the Crashlytics plugin

• Add the Google Services plugin

• Enable native symbol uploading for better stack traces

On iOS, add GoogleService-Info.plist, enable bitcode, and run pod install.

Customizing Crash Reports

By default, Firebase Crashlytics captures uncaught Flutter and Dart errors. To add context:

• Log non-fatal exceptions:

try {
  riskyOperation();
} catch (e, s) {
  FirebaseCrashlytics.instance.recordError(e, s, reason: 'Data fetch failed');
}

• Set user identifiers or custom keys:

FirebaseCrashlytics.instance.setUserIdentifier('user_12345');
FirebaseCrashlytics.instance.setCustomKey('screen', 'HomePage');

• Force a test crash:

ElevatedButton(
  onPressed: () => FirebaseCrashlytics.instance.crash(),
  child: const Text('Test Crash'),
)

These enrich your Firebase console reports, making it easier to trace issues by user, session, or custom metadata.

In-App Messaging Integration

Firebase In-App Messaging lets you display contextual cards, banners, or modals triggered by analytics events or user properties. To combine crash insights with messaging:

1. Track analytics events around crashes or error screens:

import 'package:firebase_analytics/firebase_analytics.dart';

FirebaseAnalytics analytics = FirebaseAnalytics();
analytics.logEvent(name: 'error_screen_view', parameters: {'error_code': 'E500'});

2. In the Firebase console, create an In-App Messaging campaign that triggers on the error_screen_view event.

3. Craft a message encouraging users to send feedback, update the app, or retry an action.

In your app, listen for messaging events to customize the UI:

FirebaseInAppMessaging.instance.setMessagesDisplaySuppressed(false);
FirebaseInAppMessaging.instance.triggerEvent('error_screen_view');

Now, after a crash or a handled error, users will see a targeted message guiding them to next steps.

Monitoring and Testing

Ensure your integration works end-to-end:

• Use flutter run --release to test on devices.

• Force crashes and verify they appear in the Firebase Crashlytics dashboard.

• Trigger your custom analytics event and confirm the In-App Messaging card shows up.

• Check filtering: Campaigns can target app version, user properties, or audiences built from Firebase Analytics.

Crashlytics and In-App Messaging generate separate insights panels in the Firebase console. Align these metrics to measure how often users see recovery prompts post-crash versus actual app retention improvements.

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 Flutter Firebase Crashlytics with In-App Messaging helps you not only detect crashes but also recover user trust through targeted prompts. This combination delivers robust error tracking and proactive user engagement—an intermediate-level approach that elevates your Flutter app’s quality and user experience.