Explore Realtime Database In Flutter
Firebase offers a lot of tools specific to the application, and storage is one crucial part of that tool. We will look at various ways to perform the Firebase Database operations. All the callbacks are simple and work for both IOS and Andriod with just one code. Google’s Flutter SDK can be used to develop apps that give native UI experience for both Android and iOS platforms. To write apps using Flutter, you have to use Dart programming language.
In this post, We will have a look at how to use the Realtime Database from Firebase in a Flutter. We will show a basics integration of Firebase real-time database into your flutter app.
Table of Content :
Firebase Realtime Database — Introduction
Implementation — Setup Configuration
Firebase Realtime Database
It is a cloud-hosted database that causes us to store and sync information with a NoSQL database in real-time to each associated client platforms like Android, iOS, and Web.https://www.youtube.com/embed/U5aeM5dvUpA?feature=oembed
These days NoSQL databases are picking up ubiquity, and Firebase Realtime Database is one of the NoSQL databases. Firebase store all the information in JSON group and any adjustments in information reflects quickly by playing out a sync activity over all the stages. This permits us to assemble an adaptable real-time application effectively with negligible endeavors.
It lets you construct rich, cooperative applications by permitting secure access to the database straightforwardly from customer side code. Information is persevered locally, and even while disconnected, real-time occasions keep on terminating, giving the end-client a responsive encounter.
Firebase Realtime Database feature
Realtime: — It implies the information is synchronized with every single associated device inside milliseconds of changes being made to the report.
Offline: — The Firebase Realtime Database endures information on your device. The data is consistently accessible, even application disconnected. The data is consequently synchronized once the application returns on the web.
Security: — You can characterize your security rules, which controls who approaches your Firebase database. You can likewise integrate Firebase Authentication to control access to your information.
Firebase Database Class
- We will be using the FirebaseDatabase class. This will bridge between the flutter applications and the firebase console.
- The DB is a NoSQL DB. There will not be tables, rather only JSON data stored.
- All data stored and read as JSON value only.
Firebase Security & Rules
Firebase gives an extraordinary method to make the database secure. We can apply an approach to recognize client jobs while performing read and write activities. These standards will go about as a security layer on the server before playing out any action. How about we check it.
- Authentication:- The below rules allow authenticated users can perform read or write operations.
{
"rules": {
".read": "auth != null",
".write": "auth != null"
}
}
- Without Authentication:- Below rules allow everyone can read & write data without Authentication. We’ll use it in the demo app.
{
"rules": {
".read": true,
".write": true
}
}
- Validate:- You can likewise utilize the accompanying guidelines to approve the information before inserting it into the database. You can authorize the name to be under 50 char and email to be valid utilizing email standard articulation.
{
"rules": {
".read": true,
".write": true,
"users": {
"$user": {
"name": {
".validate": "newData.isString() && newData.val().length < 50"
},
"email": {
".validate": "newData.isString() && newData.val().matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i)"
}
}
}
}
}
Firebase Project Setup
Open the Firebase console and click the “Add project” option.
Now choose a Cloud Firestore location
Now read and acknowledge the Terms and Conditions
When done, look down and click “Create Project.”
The platform might take some time to go through your application. Once completed, then click the continue option to open the overview page of the project you made.
Andriod Configuration :
Register your android app, which is generally your application Id in your app-level build. Gradle.
Now download the google-services.json. Move the downloaded google-serivces.json file into your Android app module root directory.
- Add your project level build.gradle file.
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'
}
- Add your project app-level build. Gradle 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'
- Click on Continue to console and wait for few seconds, and your application will be successfully added with Firebase.
Now you have added Firebase to the Flutter app successfully.
IOS Configuration :
Register IOS app to Firebase, and iOS bundle Id must be the same in the Xcode project and on firebase console.
Download configuration files for your app and adds it to your project folder.
Add firebase dependencies to your project.
- Make the changes needed in the AppDelegate as suggested by the setup wizard then choose next.
- Presently check the root folder to run the application. After some time, you may see the setup wizard showing that the application has been remembered for Firebase. Then choose “Continue to the Console” to finish the setup.
- Presently check the root organizer to run the application. After some time, you may see the arrangement wizard indicating that the application has been remembered for Firebase. At that point, pick “Proceed to the Console” to finish the arrangement.
Implementation
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
firebase_database: ^latest version
firebase_core: ^latest version
Step 2: Import
import 'package:firebase_database/firebase_database.dart';
Step 3: Run flutter packages get in the root directory of your app.
Step 4: Create a database reference.
final databaseReference = FirebaseDatabase.instance.reference();
Step 5: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file:
You need to implement it in your code respectively:
Database Operations :
Create Data
Read Data
Update Data
Delete Data
- Create Data
At the point when the press of the “CreateData” button, createData() procedure is requested.
To create data, we will create seven data in the database.
void createData(){
databaseReference.child("flutterDevsTeam1").set({
'name': 'Deepak Nishad',
'description': 'Team Lead'
});
databaseReference.child("flutterDevsTeam2").set({
'name': 'Yashwant Kumar',
'description': 'Senior Software Engineer'
});
databaseReference.child("flutterDevsTeam3").set({
'name': 'Akshay',
'description': 'Software Engineer'
});
databaseReference.child("flutterDevsTeam4").set({
'name': 'Aditya',
'description': 'Software Engineer'
});
databaseReference.child("flutterDevsTeam5").set({
'name': 'Shaiq',
'description': 'Associate Software Engineer'
});
databaseReference.child("flutterDevsTeam6").set({
'name': 'Mohit',
'description': 'Associate Software Engineer'
});
databaseReference.child("flutterDevsTeam7").set({
'name': 'Naveen',
'description': 'Associate Software Engineer'
});
}
- Read Data
At the point when the press of the “Read Data” button, readData() procedure is requested.
We will retrieve all data from the database and show it on Console.
void readData(){
databaseReference.once().then((DataSnapshot snapshot) {
print('Data : ${snapshot.value}');
});
}
- Update Data
At the point when the press of the “Update Data” button, updateData() procedure is requested.
To update the data, we will update the description of the name in the database.
void updateData(){
databaseReference.child('flutterDevsTeam1').update({
'description': 'CEO'
});
databaseReference.child('flutterDevsTeam2').update({
'description': 'Team Lead'
});
databaseReference.child('flutterDevsTeam3').update({
'description': 'Senior Software Engineer'
});
}
- Delete Data
At the point when the press of the “Delete Data” button, deleteData() procedure is requested.
To delete data, you can simply call remove() method on to database reference.
void deleteData(){
databaseReference.child('flutterDevsTeam1').remove();
databaseReference.child('flutterDevsTeam2').remove();
databaseReference.child('flutterDevsTeam3').remove();
}
Code File
Conclusion :
This article would serve as an Exploratory article for Realtime Database in Flutter and its working using Flutter.
I hope this blog will provide you with sufficient information in Trying up Realtime Database in Flutter in your flutter projects. This is a demo example that will integrate the Firebase Realtime Database in a flutter. We will describe all operations, and you will use it in your flutter application, and you will easily store and retrieve the data into the firebase server without the need to set up any servers on the backend, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Realtime Database Demo:
flutter-devs/Flutter-Realtime-Database-Demo
Realtime database using Firebase to store the data in the firebase server. A new Flutter application. This project is a…github.com
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 a 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.
