Tutorials

Firebase for Flutter – A Quick Guide

Updated on
Firebase for Flutter

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Developers and organizations around the globe use Flutter as it is a free, newly-built and an open-source that provides a high-geared outcome.

Performance

Firebase provides an efficient way to test app performance based on human behavior with the app and give a full report to enhance our code’s efficiency and performance.

Firebase is a Google-developed service that offers a variety of services for integration into apps and games. It primarily serves as a back-end for our applications. FlutterFire is a collection of Flutter plugins that allow Flutter programs to access Firebase services. It provides a wide range of services, including cloud hosting, storage authentication, and a real-time database firestore. It simply serves as the back-end of our application, allowing us to concentrate our efforts in flutter rather than worrying about all of this authentication database. Firebase can handle many things for us and makes it simple to integrate into our flutter apps.

Firebase Cloud Firestore

Flutter and Firebase can be used in tandem to build mobile apps in a set amount of time. Using Flutter, Google’s SDK, you will be able to create mobile apps for iOS and Android. Backend services for mobile applications provided by Firebase include authentication, database, storage, and hosting. All of this is possible without the requirement for your servers. Firebase, a non-sequel database, was introduced by Google. It is a cloud-based database that allows you to store and retrieve data without setting up your servers.

They also introduced Firebase in 2017. The main distinction is that Firebase is a no sequel and fully-fledged real-time database, while firestorm has a more organized approach to storing and synchronizing your content. You may also use firestore to run simple queries in your collections, such as VAR queries, to retrieve those documents efficiently.

Firebase Cloud Messaging

If  you are a developer then you may be familiar with the word Firebase Cloud Messaging(FCM) and you may have used it. Google previously provided notification services using Google Cloud Messaging(GCM),. Using FCM, developers can send a notification to the web, Android, and iOS. You can also send a single notification or broadcast to all or the group as well. In lieu of FCM, you can access testing tool in the server. This ensures that the whole process of integration is accurately documented and is easy to use.

Analytics

Firebase analytics provides a way to analyze user interaction with the app or web and generate a statistical report of user behavior so that the developer is able to plan a definite paradigm for app performance and to generate revenue. This service is without any cost.

Integration of Firebase in Flutter

So, in this series, we are going to learn how to integrate Firebase as a back-end. Having a back-end can be crucial in some apps so that’s why we will learn how to connect flat away firebase and creating a sign-in-flow.

So to begin, first, we have to install Flutter Project in your operating system. You can now open the Visual Studio Code and enter the following command:

flutter create firebase_with_flutter

this way, a new project would get created with the name of firebase_with_flutter. Move to the directory of the project and give the following command:

cd firebase_with_flutter

code

Now, when you give the above command, you will find a new application on your operating system.

In the next step, we will begin to integrate Firebase into the project. And for the, we will first open up the firebase console and generate a new project and then click on the Android icon to add all the information regarding the project. And at the end give it a package name.

After undergoing these steps, you can download and install the Firebase Android config file and add that under the android/app. Now, you need to navigate to the android/build.gradle and add the google maven repository and the google-services classpath accordingly. After generating the cross path, you need to apply the plugins inside your app.

Apply the Plugins

Before getting into any Firebase services, you should install the Firebase_core plugin first, which is highly responsible for connecting your application with Firebase. And then add that plugin to your pubspec.yaml file using the following command:

dependencies:

flutter:

sdk: flutter

firebase_core: "0.5.0+1"

After giving the command for the plugin, you can install the plugin by running the $ flutter pub to get the command.

Platform Setup

After the installation of the plugin, the Firebase configuration to work becomes essential for Android, Ios, MacOS, and Web installations.

Installation of FlutterFire

Before using the Firebase services, the installation of the FlutterFire is required. In order to install FlutterFire, you need to execute the following command:

await Firebase.initializeApp();

Once the process of installation is completed, you can set forth for using FlutterFire.

Saving Data

The basic database write operation is a set that saves the data to a specified database reference, by replacing any already existing data.

There are five methods in total for writing data in the Firebase Realtime Database:

SetValueAsync()- This can be used to replace or replace the data to a defined path, for example users/<user-id>/<username>.

SetRawJsonValueAsync()- this can help you replace the data with Json, just like users/<user-id>/<username>.

Push()- You can adjoin a list of data using this method. Every time you use it, the Firebase will start generating a unique key that can also be used as an identifier, like user-scores/<user-id>/<unique-score-id>.

UpdateChildrenAsync()- Using this, you could update some of the keys for a defined path without having the need to replace all the data.

RunTransaction()- This method can help you update the complex data so that you could save yourself from the trouble of corrupted data by the concurrent updates.

Firebase_core Plugin

The firebase_core plugin provides some basic functionality for users. FlutterFire is categorized into various individual installable plugins which enables us to integrate with a definite Firebase service. The following are some currently supported plugins.

Authentication (Firebase_auth)

Using Firebase Authentication you can authenticate users to your app using several methods. Firebase Auth service will provide authentication features to mobile app and web. Authentication will be available for Gmail, Facebook, Twitter, GitHub, etc. It also provides email and password authentication if one wants it. There is also an option for OTP authentication in which authentication will be done using SMS. Firebase provides free SMSs in the free subscription as well.

Cloud Firestore (Cloud_firestore)

Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Cloud Firestore also offers seamless integration with other Firebase and Google Cloud Platform products, including Cloud Functions.

Core (Firebase_core)

The firebase_core plugin is used to initialize FlutterFire and connect your application with multiple Firebase projects.

Connecting Flutter to Firebase

iOS

  1. Go to yourProject Overview
  2. Click the iOSbutton
  3. Provide your project a bundle id, default for this project is com.example.myapp
  4. Click on Register app
  5. Download the GoogleService-Info.plist
  6. Open XCode
  7. In XCodeopen your project through its Runner.xcworkspace. This file can be found within your project’s ios directory
  8. Dragyour GoogleService-Info.plist into your Runner directory
  9. In your projects directory in the terminal run the command:

cd ios && pod install && cd ..

  1. Open your apps folder in your IDE

Android

  1. Go to yourProject Overview
  2. Click the Androidbutton
  3. Give your project a bundle id, default for this project is com.example.myapp
  4. Click Register app
  5. Download google-services.json
  6. Follow step 3 in Firebase
  7. Add the following line to your projects app-module/build.gradle dependenciessection

Conclusion

We’ve now learned how to build up and prepare our Flutter applications for future use with Firebase. You have already encountered this functionality in your daily life. A portion of it is the online links that start the app with a certain screen. Firebase dynamic links will also supply the app with depth links to open certain sites. This will increase traffic to the app.

Firebase Hosting is a simple hosting service that allows you to host HTML, CSS, JavaScript, and other files. This service was added to Firebase because the developer wanted to test their work online. HTTPS and SSL are also included with Firebase hosting.


.

You may also like...