Firebase Crashlytics Setup for Flutter (iOS and Android)

A quick guide to Firebase Crashlytics in a Flutter app [iOS and Android]

Firebase Crashlytics is a powerful tool for tracking and analyzing crashes in your Flutter app. Follow this guide to integrate Firebase Crashlytics into your Flutter project for both iOS and Android.

Prerequisites:

Flutter installed: Flutter Installation Guide
Firebase account: Firebase Console

Step 1: Create a Flutter App

Create a new Flutter app using the following command:

flutter create my_crashlytics_app
cd my_crashlytics_app

Step 2: Create a Firebase Project

Go to the Firebase Console.
Click on "Add Project" and follow the setup instructions.

Step 3: Set Up Firebase for Flutter (iOS and Android)

For iOS:

In your Firebase project, click on "iOS" to add an iOS app.
Follow the setup instructions, download the GoogleService-Info.plist file, and add it to the ios/Runner directory of your Flutter project.
Follow any additional setup instructions provided by Firebase.

For Android:

In your Firebase project, click on "Android" to add an Android app.
Follow the setup instructions, download the google-services.json file, and add it to the android/app directory of your Flutter project.
Follow any additional setup instructions provided by Firebase.

Preferred method: You can click on Add App and select Flutter (follow the instructions for the setup) or you can run flutterfire configure on your terminal and select the firebase project and the platforms (which will generate firebase_options.dart automatically) if you have Firebase CLI installed

Step 4: Add Firebase Plugins to `pubspec.yaml`

Open your pubspec.yaml file and add the following dependencies:

dependencies:
  firebase_crashlytics: ^3.4.6
  firebase_core: ^2.24.0

Run flutter pub get to install the dependencies.

firebase_core: https://pub.dev/packages/firebase_core
firebase_crashlytics :https://pub.dev/packages/firebase_crashlytics

Step 5: Update `main.dart`

Replace the content of lib/main.dart with this

import 'dart:ui';

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

import 'firebase_options.dart';
import 'presentation/main_screen.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  // Pass all uncaught "fatal" errors from the framework to Crashlytics
  FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;

  // Pass all uncaught asynchronous errors that aren't handled by the Flutter framework to Crashlytics
  PlatformDispatcher.instance.onError = (error, stack) {
    FirebaseCrashlytics.instance.recordError(error, stack, fatal: true);
    return true;
  };

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

Step 6: Create Presentation Folder and `HomeScreen.dart`

Create a folder named presentation in the lib directory.
Create a file named home_screen.dart inside the presentation folder and add this provided code.

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Firebase Crashlytics App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 15),
            ElevatedButton(
              onPressed: ()=> throw Exception(),
              child: const Text('Throw Exception'),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () => const FormatException('An error occurred'),
              child: const Text('Throw Exception with Feedback'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Step 7: Run the App

Run the app on your simulator and emulator to test the app for iOS and Android

Step 8: Trigger Crashes

Open the app on an iOS simulator (used iPhone 14 Pro Max) and Android emulator (used Google Pixel 7 Pro API 30) and click the "Throw Exception" and "Throw Exception with Feedback" buttons to trigger crashes.