How to Integrate Firebase with Flutter for iOS and Android Apps

Flutter is more efficient and better-performing than other cross-platform frameworks, and it gives applications a native feel that’s similar to apps built in Kotlin or Swift. Flutter app development services are growing in popularity, and many companies start to choose this framework over native technologies that are more expensive to develop on.

Top 7 Reasons to Choose Flutter for Your Cross-platform App Development Project

Learn about the best cross-platform technology

Flutter is used for frontend development, and in this article, you’ll figure out how to set up a backend for a Flutter application using Firebase.

Why integrate Firebase with your Flutter app?

There are two possible cases in which you may need to add Firebase to a Flutter app.

The first case is when you’re developing an MVP and you don’t want to invest in building a custom backend just yet. In this case, you can connect the flutter app to firebase and get yourself a ready backend that you can use at the start of your project.

The second case is when you don’t have a backend yet but you need to test your application. After you’ve built the frontend of your application, you need to pair it with the backend to check if everything works properly. This is when you can add Firebase to a Flutter app as a temporary solution.

In both of these cases, Firebase is a great solution. So what is Firebase, and what does it provide? Firebase is Google’s backend as a service platform for mobile apps, allowing you to build or prototype your backend in the cloud without having to manage or scale your servers.

Flutter Development

Get a cost-effective Flutter app for all screens and platforms

Firebase has everything you need from a backend for your mobile app, including a database, server, hosting, authentication, and convenient statistics that allow you to receive feedback and data on user actions. One of its most famous tools is Crashlytics: it helps to track app’s performance and errors.

For example, Firebase Realtime Database provides developers with an API that synchronizes application data between clients and stores it in the cloud.

Firebase offers extensive documentation that’s great for junior developers, so you can build your backend fast. Firebase has its drawbacks — it may not be suitable or cost-effective for a large and long-term project — but it’s definitely worth it if you’re developing an MVP.

Now that you have a general idea of what Firebase is and what it’s used for, let’s look at how to set it up.

How to set up Firebase with your Flutter app

Let’s go through the whole Flutter-Firebase setup process. First, go to Firebase Console and create a Firebase project.

After you’ve created your project, choose the option for adding Firebase to an iOS, Android, web, or Unity project. In this article, I’m talking specifically about Flutter development for Android and iOS, so I’ll choose this option.

Configuring Firebase for iOS

1. Register your iOS app in Firebase:

2. Click Download GoogleService-Info.plist and drag this file into the ios/Runner subfolder:

3. Add the Firebase/Core pod line to your PodFile.

Now you’re done configuring your Flutter app for iOS!

Configuring Firebase for Android

1. In your Flutter app directory, open the file android/app/src/main/AndroidManifest.xml. In the manifest element, find the string value of the package attribute. This value is the Android package name (something like com.yourcompany.yourproject). Copy this value into the Android package name field, then click Register app:

2. Next, download the google-services.json config file and move it into the android/app directory:

3. Go back to the Firebase console, skip the remaining steps, and return to the main page of the Firebase console.

4. Finally, you need the Google Services Gradle plugin to read the google-services.json file that was generated by Firebase. In your IDE or editor, open android/app/build.gradle, then add the following at the end of the file:

dependencies {
 	implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
 	implementation 'com.google.firebase:firebase-analytics:17.2.2'}
apply plugin: 'com.google.gms.google-services'

5. Now, open android/build.gradle and add a new dependency inside the buildscript tag:

dependencies {
 		classpath 'com.android.tools.build:gradle:3.5.0'
 		classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
	classpath 'com.google.gms:google-services:4.3.3'
}

6. If your app is still running, close and rebuild it to allow gradle to install dependencies.

That’s it! You’re done configuring Firebase for Android!

Now, it’s time to integrate your Flutter app with the Realtime Database plugin. The first thing you need to do is add dependencies to your pubspec.yaml file and save them.

Note that you need to make sure your app is built only with this version of the plugin.

Next, you need to run flutter packages get. Like a regular database, Flutter has CRUD operations. The following code shows how to get an instance of a Realtime Database object and work with it.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:firebase_database/firebase_database.dart';



void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(
MaterialApp(home: FirebaseRealtimeDemoScreen()),
);
}



class FirebaseRealtimeDemoScreen extends StatelessWidget {
  final databaseReference = FirebaseDatabase.instance.reference();

  @override
  Widget build(BuildContext context) 
    return Container(
    color: Colors.white,
    child: SafeArea(
      child: Scaffold(
        body: Center(
         child: Padding(
           padding: EdgeInsets.all(16.0),
           child: Center(
             child: Padding(
               padding: EdgeInsets.all(16.0),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.stretch,
                 children: [
                   RaisedButton(
                     child: Text('Create Data'),
                     color: Colors.amber,
                     onPressed: () {
                       create();
                     },
                     shape: RoundedRectangleBorder(
                     borderRadius: BorderRadius.all(Radius.circular(20),),
                   ),
                 ),
                 SizedBox(height: 8,),
                 RaisedButton(
                   child: Text('Read Data'),
                     color: Colors.amber,
                       onPressed: () {
                         read();
                       },
                       shape: RoundedRectangleBorder(
                       borderRadius: BorderRadius.all(
                         Radius.circular(20),
                       ),
                     ),
                   ),
                   SizedBox(height: 8,),
                   RaisedButton(
                     child: Text('Update Data'),
                     color: Colors.amber,
                     onPressed: () {
                       update();
                     },
                     shape: RoundedRectangleBorder(
                     borderRadius: BorderRadius.all(Radius.circular(20),),
                   ),
                   ),
                   SizedBox(height: 8,),
                   RaisedButton(
                     child: Text('Delete Data'),
                     color: Colors.amber,
                     onPressed: () {
                       delete();
                     },
                     shape: RoundedRectangleBorder(
                       borderRadius: BorderRadius.all(Radius.circular(20),),
                     ),
                   ),
                 ],
               ),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

  void create() {
    databaseReference.child("childTeam1").set({'name': 'Den', 'votes': '0'});
    databaseReference.child("childTeam2").set({'name': 'Masha', 'votes': '3'});
    databaseReference.child("childTeam3").set({'name': 'Petya', 'votes': '1'});
  }



  void read() {
    databaseReference.once().then((DataSnapshot snapshot) {
      print('Data : ${snapshot.value}');
    });
  }



  void update() {
    databaseReference.child('childTeam1').update({'votes': '3'});
    databaseReference.child('childTeam2').update({'votes': '2'});
    databaseReference.child('childTeam3').update({'votes': '1'});
  }



  void delete() {
    databaseReference.child('childTeam1').remove();
    databaseReference.child('childTeam2').remove();
    databaseReference.child('childTeam3').remove();
  }
}

That’s everything you need to do to set up your Firebase backend for your Flutter app. As you can see, the process is rather straightforward, so it’s no surprise that many companies choose Firebase as their first or trial backend platform.

Final thoughts

In this article, you’ve learned how to add a Firebase database to the Flutter app. You can choose from other Firebase plugins for Flutter, such as firebase_messaging, which allows you to send and receive push notifications for both Android and iOS, or cloud_firestore, which includes all the Firebase APIs. You can find a complete list of Firebase plugins here.

In my opinion, Firebase is great for Flutter app development, and its comprehensive documentation makes development fast and pleasant. If you want to create a Flutter app or need help with Flutter and Firebase integration for your application, hire our Flutter app developers. We’re able to build a robust and maintainable backend from scratch or integrate any backend as a service solution into your mobile app.