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 effective way to test app performance according to human behavior with the app and generate a detailed report of it so that we can improvise our code and improve it’s efficiency and performance.
Firebase provides lots of services to integrate into apps and games services and it is developed by Google and it just acts as a back-end to our applications. FlutterFire is a set of Flutter plugins that enable Flutter apps to use Firebase services. It offers loads of different things such as cloud hosting, storage authentication services, and a real-time database firestore as well. It just acts as the back-end of our application so that we can put most of our focus over here in flutter instead of worrying about all this authentication database. Firebase can take care of a lot of that for us and makes it simple to implement inside our flutter applications.
Firebase Cloud Firestore
Both Flutter and Firebase, can be used conjointly to build mobile apps in a programmed time. By using Flutter, which is Google’s SDK, you will be entitled to build mobile apps for iOS and Android. You can access the backend services for mobile applications using Firebase, which covers authentication, database, storage, and hosting. You can do all this without maintaining your own servers. Firebase is a no sequel database introduced by Google. It is a cloud-based database and has an excellent way to store and retrieve data without the hassle of spinning up your own servers.
In the year 2017, they also introduced firebase and the basic difference between them both is that the firebase is a no sequel and fully-fledged real-time database whereas firestore has a more organized way of storing and syncing your documents. With firestore you can also perform simple queries such as VAR queries in your collections to retrieve those documents in an efficient way.
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
- Go to yourProject Overview
- Click the iOSbutton
- Provide your project a bundle id, default for this project is com.example.myapp
- Click on Register app
- Download the GoogleService-Info.plist
- Open XCode
- In XCodeopen your project through its Runner.xcworkspace. This file can be found within your project’s ios directory
- Dragyour GoogleService-Info.plist into your Runner directory
- In your projects directory in the terminal run the command:
cd ios && pod install && cd ..
- Open your apps folder in your IDE
Android
- Go to yourProject Overview
- Click the Androidbutton
- Give your project a bundle id, default for this project is com.example.myapp
- Click Register app
- Download google-services.json
- Follow step 3 in Firebase
- Add the following line to your projects app-module/build.gradle dependenciessection
Conclusion
We’ve now learned how to set up and ready our Flutter applications to be used with Firebase in the near future. You have already experienced this feature in your day to day life. The web links that that directly open app with a specific screen is a part of it. Firebase dynamic links will provide the depth links for the app to open specific pages as well. This will improve the traffic in the app.
Firebase Hosting provides a basic hosting service to host HTML, CSS, JavaScript, and other files. This service is introduced in firebase because the developer wants to test their stuff online. Firebase hosting includes HTTPS and SSL as well.
