How To Connect Firebase In Flutter?

In this article, I will guide you through all the steps required to create a Skeleton Portable App on Flatter with the help of Firebase.

Google’s Flutter SDK can be used to develop applications that provide a local UI experience for both Android and iOS platforms. To write apps using Flutter, you have to use the Dart programming language.

Firebase Realtime Database is a cloud-hosted database stored as JSON. It provides a backend database with secure access to create rich, collaborative applications directly from the client-side. Data is retained locally on the device while offline and real-time events provide a responsive experience to the end user. When the device reconnects to the Internet, the real-time backend database automatically synchronizes with local data changes that occur while the client is offline when a conflict auto-merges.

Create Firebase Project

Create Flutter project

Use the to create a new project.

In your IDE or editor, open the file pubspec.yaml. Add dependency for firebase_database and save the file.

Open ios/Runner.xcworkspace. Keep same Bundle Identifier in Xcode project as defined on the firebase console and save GoogleService-info.list in Runner folder.

 In your IDE or editor, open the file pubspec.yaml. Add dependency for firebase_database and save the file.

In your IDE or command line with its current directory set to your Flutter app directory, run the following command.

flutter pub get

Setup:

Import dependency for firebase.

import 'package:firebase_database/firebase_database.dart';

Create a database reference object to work with the database.

FirebaseFirestore firebaseFireStore = FirebaseFirestore.instance;

Create Record

1. On click of the “Create Record” button, create record() method is invoked.

RaisedButton(
    child: Text('Create Record'),
    onPressed: () {
      createRecord();
    },
),

2. To create a record(), we create two demo records in the database.

void createRecord(){
  firebaseFireStore.child("1").set({
    'title': 'Programming',
    'description': 'Programming Guide for J2EE'
  });
  firebaseFireStore.child("2").set({
    'title': 'Flutter in Action',
    'description': 'Complete Programming Guide to learn Flutter'
  });
}

View Records

1. On click of “View Record” button, getData() method is invoked.

RaisedButton(
    child: Text('View Record'),
    onPressed: () {
      getDoc();
    },
)

2. In getDoc(), we retrieve all records from the database.

void getDoc(){
  firebaseFireStore.doc().then((DataSnapshot snapshot) {
    print('Data : ${snapshot.value}');
  });
}

They are printed on the console

Data : [{title: Programming, description: Programming Guide for J2EE}, {title: Flutter in Action, description: Complete Programming Guide to learn Flutter}]

Update Record

1. On click of “Update Record” button, updateData() method is invoked.

void updateData(){
  firebaseFireStore.child('1').update({
    'description': 'J2EE complete Reference'
  });
}

2. It updates the description of title ‘Programming‘ from ‘Programming Guide for J2EE’ to ‘J2EE complete Reference’

Delete Record

1. On click of “Delete Record” button, deleteData() method is invoked.

void deleteData(){
  firebaseFireStore.child('1').remove();
}

Thanks for reading. If you enjoyed this article. This article is part of a series of articles on mobile technology. If you are having any queries, please contact us.