FLUTTERDEVS

Crashlytics In Flutter

Learn How To Integrate Firebase Crashlytics In Your Flutter Apps

Mohit Joshi
Sep 30 · 9 min read
Image for post
Image for post
Firebase Crashlytics In Flutter

Flutter & Firebase have both Transformed into an Omnipotent Integral part of the Developers Community corresponding to their Innate Ability of Never-Ending Scope of Development Covering Multiple platforms like — Android, iOS, Web, and Desktop Apps with an Incessant Dire focus on Making Performant Apps. While both of them have made their Introduction recently, They have gained Immense Popularity & Acceptance in a flash and are now widely trusted by the largest apps around the globe 🌐.

In This Article : The Focus will Be Mainly on Integrating Firebase Crashlytics In Your Flutter Apps

Table of Content :

What is Flutter ?

Flutter Introduction Video

Flutter Is Proudly Entrusted By These Organizations For their Products : — Flutter Showcase

Image for post
Image for post
Click to See Flutter Showcase

What is Firebase ?

Firebase is a powerful platform for your mobile and web application. Firebase can power your app’s backend, including data storage, user authentication, static hosting, and more. With Firebase, you can easily build mobile and web apps that scale manifolds.

Let us have a glimpse of Firebase 🔥, and all the tools and services that it provides :

As Flutter can be readily used to develop applications for multiple platforms, Firebase products work significantly great by sharing Data and Insights so that they can work profoundly better together.

Firebase Introduction Video

Firebase Showcase :

Image for post
Image for post
Click to know more about Firebase

Intro to the Topic : Firebase Crashlytics 🚀

The Most Powerful, yet Lightest Weight Crash Reporting Solution

Crashlytics helps using 3 main aspects :

If you wish to learn more about Firebase Crashlytics, You can check out the following video made by firebase :

Firebase Crashlytics Introduction Video

Firebase Crashlytics : Key Capabilities

Image for post
Image for post
Crashlytics Key Capabilities

Implementation Pattern : Firebase Crashlytics

Let us understand the Implementation pattern of Firebase Crashlytics:-

Firebase Crashlytics — Setup & Initial Configuration

In order to Integrate Crashlytics, We need to create a firebase project for the Firebase Crashlytics from firebase.google.com by logging in with your Google account. This brings us to the following screen:

Image for post
Image for post
Add project at Firebase Console
Image for post
Image for post
Mention Name of project
Image for post
Image for post
select analytics (if needed )
Image for post
Image for post
Firebase project created
Image for post
Image for post
Dashboard Screen

Integration with iOS App

In the project overview page, select the iOS icon to launch the setup flow. If you have already added the app to your project provide click on add app to provide details of your application.

Image for post
Image for post
iOS app Integration
  1. Register your app with Firebase :
  2. a. Provide with your app’s bundle ID.
    Find this bundle ID from your open project in XCode. Select the top-level app in the project navigator, then access the General tab. The Bundle Identifier value is the iOS bundle ID (for example, com.yourcompany.ios-app-name).
    b. You may also provide optional details like App Nick Name and App Store ID.
    c. Register your app.
Image for post
Image for post
Download GoogleService-Info.plist

Next step, We need to download the config file named GoogleService-info.plist & repeating a similar process to registering your android app there saving the Google-service.json file. Keep those configuration files in ready-to-use with the Flutter app later.

Image for post
Image for post
google-service.json

Add the Firebase configuration file :

Make sure the config file is not appended with additional characters, like (2).

:. Using XCode, move the file into the Runner/Runner directory of your Flutter app.

Adding Crashlytics plugin In Flutter App :

firebase_crashlytics: "^0.2.0"
dependencies {
classpath 'com.google.firebase:firebase-crashlytics-gradle:2.2.0'}
apply plugin: 'com.google.firebase.crashlytics'
dependencies {
// Adding Firebase Crashlytics SDK
implementation 'com.google.firebase:firebase-crashlytics:17.0.0-beta01'
}

iOS :

Import package At Your Project File:

import 'package:firebase_crashlytics/firebase_crashlytics.dart';

Add Firebase Crashlytics Instance In Your Flutter App :

void main() {
// Set `enableInDevMode`to true to see reports while in debug mode
// This is only to be used for confirming that reports are being
// submitted as expected. It is not intended to be used for //everyday development.
Crashlytics.instance.enableInDevMode = true;

// Pass all uncaught errors to Crashlytics.
FlutterError.onError = Crashlytics.instance.recordFlutterError;
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]).then((_) {
SharedPreferences.getInstance().then((prefs) {
var darkModeOn = prefs.getBool('darkMode') ?? true;
runZoned(() {
runApp(ChangeNotifierProvider<ThemeNotifier>(
create: (_) => ThemeNotifier(darkModeOn ? darkTheme : lightTheme),
child: MyApp(),
));
}, onError: Crashlytics.instance.recordError);
});
});
}

Rebuild your app :

$ flutter run

You will be abled to see the crashlytics dashboard in firebase console on successful installation

Image for post
Image for post
Crashlytics Console

Closing Thoughts

We have familiarised ourselves with Firebase Crashlytics — Integration in apps. They can be embodied as a tool that can play an Influential role in Strengthening Up of Apps By Availing Curated Crash Reports, Curing Common Crashes, Getting Realtime Updates to Prioritize Bug Fixing & It’s Integration with Analytics to Contemplate Future Campaign Strategies. Hope After reading the article you must have gotten insightful of Firebase Crashlytics in Flutter. Give it a TRY!!

🌸🌼🌸 Thank you for reading. 🌸🌼🌸🌼

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Image for post
Image for post

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high…

Mohit Joshi

Written by

Less Human . More Being

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Mohit Joshi

Written by

Less Human . More Being

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store