How not to get crazy with FlutterFire Crashlytics

Many of you know Firebase and its services: from Analytics to Messaging.

Crashlytics is one of the most important and useful Firebase's services. This is a great crash reporting tool, with detailed stack trace reporting and many other options to filter and check why your app is (failing? crashing? Se è giusto going down lascialo, però se riesci usa qualcosa di più specifico come: failing etc).

Adding Crashlytics on an Android or iOS app is no big deal. On the other hand, using Flutter is a little bit more complex than how it should be. In my opinion, the official doc isn't sufficiently clear on what to do first, especially if you visit that page with no Firebase knowledge.

So I wanted to summarize the steps you'll need to do to add Crashlytics to your Flutter app, so that you'll no longer need to waste hours on inexplicable errors like I did.

BE AWARE: You should do everything with a Mac because there are some elements you'll have to do on XCode.

1. Create a Firebase Project

This is a pretty easy task. Go here and create a project. Name it whatever you want. Done

2. Download the .json and .plist Google Services files

Now create on your Firebase Project an iOS and an Android app with the top-left buttons. You'll need some data from your app:

• Android: bundle_id
• iOS: ios_bundle

After that you will be prompted to download a .json file for Android and a .plist file for iOS. Download them in a separate folder and go on. You've created two Firebase Apps now. The easiest part is done.

3. Add Firebase and Crashlytics to your pubspec file

That's not hard, add these dependencies on your pubspec.yaml dependencies part:

firebase_core: "^0.5.3"
firebase_crashlytics: "^0.2.4"

Give it a good pub get then forget about Flutter for a few minutes.

4. Add Firebase plugin and dependencies to Android

Open your Android part of the project and follow these steps:

1. Add the .json Google Services file into your "app" folder

2. Add the Google Services buildscript dependency to your project build.gradle file:
   

   buildscript {
    dependencies {
     // ... other dependencies
     classpath 'com.google.gms:google-services:4.3.3'
    }
   }

1. Add the Google Services plugin to your app build.gradle file:
   apply plugin: 'com.google.gms.google-services'

2. Add Multidex and Firebase

   to your app build.gradle file:
   

   defaultConfig {
       applicationId "YOURID"
       minSdkVersion 19
       targetSdkVersion 29
       versionCode flutterVersionCode.toInteger()
       versionName flutterVersionName
       multiDexEnabled true
   }

   dependencies {
       implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
       implementation platform('com.google.firebase:firebase-bom:26.1.0')
       implementation 'com.google.firebase:firebase-crashlytics'
       implementation 'com.google.firebase:firebase-analytics'
       implementation 'com.android.support:multidex:2.0.1'
   }

Then with Android you should be ok. Time for iOS.

5. Add Firebase script and copy the Google-services.plist file to iOS

Open XCode with your iOS part of Flutter project then:

1. Copy the GoogleService-Info.plist file that you've downloaded in step 2 in your iOS project. Open the Runner project with Xcode (iOS/Runner.xcworkspace) and copy the Google-service-Info.plist file in the Runner folder. When it's asked make sure that the "Copy items if needed" checkbox is enabled.
2. Add a Build Script so the Firebase Crashlytics runs when the app is built: go to the "Build Phases" tab of the Runner project, click on the top-left plus button and select "New Run Script Phase". Name it "Firebase Crashlytics" and paste it in the script text box: ${PODS_ROOT}/FirebaseCrashlytics/run

6. Update your Flutter app start code

Make your "main" widget a Stateful one and on initState do this before the super call:

Future<void> _setupCrashlytics() async {
  await Firebase.initializeApp();
  await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
  Function originalOnError = FlutterError.onError;
  FlutterError.onError = (FlutterErrorDetails errorDetails) async {
    await FirebaseCrashlytics.instance.recordFlutterError(errorDetails);
    originalOnError(errorDetails);
  };
}

Now you should be ready to go! Try to force a crash with FirebaseCrashlytics.instance.crash() and see if it appears on your dashboard.