FlutterFire, a love story
Tags: flutter, firebase, dart, mobile
Published: 2019-10-16 15:16:41

---
title: FlutterFire, a love story
published: true
description: The simple yet enough intro you need for Flutter with Firebase
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6rtttgr7xm8m4tc63jhn.png
tags: flutter, firebase, dart, mobile
---

**If you already read it all:**
+ [Flutter](#flutter)
+ [Firebase](#firebase)
+ [Android setup](#android-setup)
+ [iOS setup](#ios-setup)
+ [FlutterFire](#flutterfire)
+ [Last words](#last-words)

The mobile world has evolved so much over the last couple of years. In the beginning, you wrote an Android app with the infamous Java and an iOS app with the unique Objective-C.

Now, history has changed, you can make both apps at once from a single codebase. Yes, it sounds like a huge waste of resources and probably poor performance. It is, but not with Flutter.

### What is Flutter?

You can read a complete explanation in [flutter.dev](https://flutter.dev), but in a few words:

>**Flutter** is a framework for UIs made by Google using a language called _Dart_.

### What is Dart?

You can read a complete explanation in [dart.dev](https://dart.dev), but in a few words:

>**Dart** is a programming language (obviously) made by Google that first was thought as an alternative for JavaScript, and it can compile to JS, but its most important feature is that it compiles to native ARM machine code.

That capability actually makes Dart really efficient and the fact that Flutter is written in Dart, allows it to run in a lot of platforms like desktop, web and embedded devices.

### What is FlutterFire? 

I forgot, have you heard of Firebase? If not, it is one of Google's most amazing tools for managing the backend of your apps.

And **FlutterFire** is a group of plugins that allow Flutter to access a Firebase backend. So you can guess it's pretty awesome.

## OK, with that said...

When I started with Flutter in a project of a mobile app at work, I wanted to setup crashlytics and analytics for it. So my option was the known [Fabric](https://fabric.io) but that cool service was acquired by Google and it became part of Firebase.

So we're gonna use Firebase and FlutterFire to show you how to make a great backend and add other services to your apps.

**So let's start.**

First things first, install Flutter [here](https://flutter.dev/docs/get-started/install).

You probably have a Google account so, just head over to [Firebase](https://firebase.google.com) and go to console to create a new project.

# Flutter part <a name="flutter"></a>

OK, this is an example so with Flutter you should run `flutter create <cool_name>` if you're using a text editor and let your app build.

I'll use Android Studio because let's _keep things Google_, or JetBrains, I don't care. 

Make sure you check the following configurations if you're using Android Studio too:

![Android Studio configs](https://thepracticaldev.s3.amazonaws.com/i/zms7f891j38f214bl238.png)

Then we hit finish and we're going to leave that app as-is.

I know you might think this is the end of the Flutter part but we'll come back for more. Now let's play with fire.

# Firebase part <a name="firebase"></a>

When you go to the Firebase console, create a new project.

**Call it whatever you want.**

**Don't enable analytics, yet.**

**Done.**

Fresh new Firebase project. Easy, huh?

Let's keep going.

# Android setup <a name="android-setup"></a>

Starting with the Android app, we're going to fill this info:

![First step](https://thepracticaldev.s3.amazonaws.com/i/c38tciyqkihc8jy212jf.png)

One by one:

+ The first is found in the Android folder of your Flutter app. You go this way: 

`android/app/src/main/AndroidManifest.xml`
There you'll find the package name like `com.<company>.<appName>`

+ A nickname, optional.
+ This is your debug SHA-1, it is optional but my personal recommendation is to put it. If you click the interrogation button it shows a guide to get it.

Next, download that `google-services.json` and put it in the app module of your android folder, like this: 

![Where is the google-services.json](https://thepracticaldev.s3.amazonaws.com/i/39dx19kllfbv0xxxnsd7.png)

On the third step, you have to setup **add** Firebase in the Android app, I'll tell you the file you're going to edit and what to put. 

But before that, open the `AndroidManifest.xml` if you closed it, and click on the upper right the `Open for Editing in Android Studio` button. 

That opens a new Android Studio window with the Flutter's Android app as a single Android app. Easier to work with.

If you clicked the button I told you, you now have this view:

![](https://thepracticaldev.s3.amazonaws.com/i/4jf8hs3y0yoo9ugsnj5y.png)

Now, these are the files and the lines to add:

+ `build.gradle` the one that says _(Project: android)_, add in `buildscript` property `dependencies` under `$kotlin_version` the Google Services line:

`classpath 'com.google.gms:google-services:4.3.2'`

Your version may vary, check what Firebase suggests.

+ `build.gradle` the one that says _(Module: app)_, check if it has the `apply plugin: 'com.android.application'` under all the Flutter SDK, versionCode and versionName configuration. 

Then add at the very bottom of that file this line: `apply plugin: 'com.google.gms.google-services'`. That actually applies the Firebase SDK.

Then, let's sync gradle.

_By the way, probably as you travel through the Android project some warnings will show up. Just refactor and let the IDE do its job._

**Go back to the Firebase console** and click `Next`, then `Go to console` and your Android app is setup. 🥳

Now let's set up the other app.

# iOS setup <a name="ios-setup"></a>

iOS it's actually easier I might say. 

**If you don't have a Mac, this is probably useless, skip [here](#FlutterFire).**

Let's open the iOS app with Xcode, obviously, you need to have Xcode installed with its components and other stuff configured.

![how to open flutter in Xcode](https://thepracticaldev.s3.amazonaws.com/i/664qn64jb886dwfzsnw7.png)

Now that you've opened it, we need to fill this info:

![info firebase iOS](https://thepracticaldev.s3.amazonaws.com/i/87g4z94w9stsobi55bz9.png)

+ The first you can find it selecting the project in Xcode, then the `Target` and heading to the `General` tab.

Here's a visual guide:

![iOS bundle](https://thepracticaldev.s3.amazonaws.com/i/jyr5i0m0ur1bq003mgva.png)

+ Again, optional app nickname.
+ If you already published your iOS app in the AppStore, fill the URL with the AppStore URL.

OK, now download the `GoogleService-Info.plist` (the equivalent of Android's JSON file) and put it under the `info.plist` in Xcode.

**ATTENTION**. Do that dragging it to Xcode, not in Finder. 

You will see this modal:

![copying the plist](https://thepracticaldev.s3.amazonaws.com/i/w6bu5ga6b5g3x0qbgayc.png)

And hit `Finish`. Done.

Then skip all the next steps in Firebase configuration. Flutter gets in charge of those.

# FlutterFire <a name="FlutterFire"></a>

Let's use the plugins!

**YOUR APP MUST NOT BE RUNNING RIGHT NOW.**

Open the `pubspec.yaml` in your Flutter app and add the Firebase Core:

`firebase_core: ^0.4.0+9`, that's the version I'll use but you can use a newer one. Should look like this:

![add Firebase Core](https://thepracticaldev.s3.amazonaws.com/i/06byu5q82hmiwbrlgj4l.png)

Then run `flutter packages get`.

And now that the core of Firebase is in our app, let's install plugins.

I am lazy, so I'll use the analytics one because it's actually the easiest to test. [Here](https://github.com/FirebaseExtended/flutterfire) you have a list of all the plugins you can add.

Under the `firebase_core` you can add `firebase_analytics: ^5.0.2`, that's the version I'm going to use.

Analytics can be used like any other Flutter package. I'm going to use the sample in [pub.dev](https://pub.dev/packages/firebase_analytics#-readme-tab-) because again, I'm a lazy dev.

My `main.dart` looks like this:

```dart
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FirebaseAnalytics analytics = FirebaseAnalytics();

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      navigatorObservers: [
        FirebaseAnalyticsObserver(analytics: analytics),
      ],
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
```

Now **RUN, FORREST, RUN** that app.

You can see if it actually worked in your Firebase console, go to analytics dashboard and if you ran your app in both devices, there should be an Android and an iOS device in the daily active users, like this:

![voilà](https://thepracticaldev.s3.amazonaws.com/i/xpgv6z2i3l51z6ad0pn3.png)

That should be it, you've configured Firebase for a Flutter app and also used one of the FlutterFire plugins! 🎉

# Last words <a name="last-words"></a>

If you're a lazy dev like me, you probably love Firebase as much as I do. Also, Flutter makes mobile development really fast and Google has put so much effort into making both work seamless together.

Go hack some stuff with this stack!

Also, if I didn't mention something and you have doubts about some part in this post, remember this meme:

![meme](https://thepracticaldev.s3.amazonaws.com/i/ee56zt2i5fzwuebt5pbb.jpg)