Exploring Firebase With Flutter

Firebase Connection

To connect the Firebase project to your flutter app there are a few steps you need to follow:

1. Create a Flutter project
2. Create a Firebase project
3. Add your Flutter app in Firebase project

Firstly Let’s start with setting up your Firebase project

1. Go to Firebase Console. Sign with your Google account if prompted.
2. Select the Add project. And follow the 3 Steps as mentioned.
3. After following the steps your project window will appear.

Below the “Get Started by Adding Firebase to your app” select Android.

1. Now this screen will appear

The first field is the Android Package name, this is a compulsory field.

You can find your application package name in <Project-Name>/android/app/build.gradle. in applicationId.

For example, in our case, it’s “com.example.flutter_ocr”.

App-level Gradle file

2. Fill Your app name (optional) and for SHA-key follow the steps below.

If you want to use Dynamic Links, Invites, and Google Sign-In or phone number support in Auth. Edit SHA-1s in Settings, follow next instructions else, skip the Step below:

I. To generate SHA-1 key follow the given steps :

II. Open Android Studio

III. Click on Gradle from right option menu bar ( make sure your project completely builded from Android studio )

IV. Select App/Android/signingReport from gradle.

V. After clicking signingReport you can see console output in terminal.

3. In this console window, you can see SHA-1 key use this SHA-1 in firebase console.

4. Now Download google-services.json and place it inside <Project-Name>/android/app. And press Next.

5. Now follow the instructions in Step 3:

I. Copy Paste all the mentioned classpath in <Project-Name>/android/build.gradle

II. And corresponding and plugins and implementation in <Project-Name>/android/app/build.gradle and press Next. (Verification will start after this step, you can skip this step).

Now you’ve successfully connected your Flutter project to your Firebase Project.

Firebase Authentication

So there are many ways we can authenticate users, few of them which we covered were:

I. Sign in anonymously

II. Sign-in with email-id and password

III. Phone OTP verification

To use authentication first Click on “Set up Sign-in method”:

1. Sign-In Anonymously:

• First of all, make sure you have enabled Anonymous sign-in option in Sign-in Methods.

You can do this by navigating to Navigation Drawer > Authentication > Sign-in method.

On the Anonymous method Click the “Enable” option and then press “Save”.

• Then you need to add the firebase_auth: ^0.15.4 dependency to the pubspec.yaml file and press Get Packages in top right (For VSCode) or run flutter pub get in the terminal.

firebase_auth: ^0.15.4 dependency

NOTE: We have used the latest version of this library it is possible that it might not be compatible with your SDK version if that’s the case try reducing the version. Check the versions of this library here.

Next, create a _signInAnonymously() function to sign in current user and generate a key for that user without any credentials (such as email, password, etc.)

Remember why we used async and await….?

• Now you can call this function at onPressed/ onTap of any Button or Widget and you’re ready with Anonymous sign-in method for your app.

2. Sign-In with mail id and password:

• To activate authentication with email and password, enable Email/Password.

You can do this by navigating to Navigation Drawer > Authentication > Sign-in method > Email/Password. And then “Save”.

• Now add the dependency in your firebase_auth: ^0.15.4 dependency to the pubspec.yaml file and press Get Packages at top right (For VSCode). (if you have already done, you can ignore this step).
• Create a function loginWithEmailPass() to sign-in the user with email id and password.
• Now you can use this function in onPressed of any Button.

The function needs email id and password as a string input from TextField().

3. Phone OTP verification

• Before we start make sure that you have enabled Phone Authentication in the Sign-in method and then Save.

• Again don’t forget to add firebase_auth: ^0.15.4 dependency.
• Create a function verifyPhone() to sign-in the user using OTP. This function requires phoneNo as a String and input it in function _auth.verifyPhoneNumber()

Firebase Realtime Database

1. Create a Firebase Project.
2. Select database option from develop section

3. Select Real-time Database.

For our example, we have designed a database as below:

4. Make sure, both the rules which are defined in the Rules tab are True.

5. Add dependencies in pubspec.yaml :

Following are the sample codes for Get & Set:

1. To Set Data to Realtime Database you can use this function:

You can now call this function in onPressed of a widget.

2. To Get Data from Realtime Database you can use the following function:

Firebase Cloud Firestore

1. Create a Firebase Project.
2. Select database option from develop section

3. Select Cloud Firestore.

For our example, we have taken the database below:

4. Make sure, the rules which are defined in the Rules tab are True.

5. Add dependencies in pubspec.yaml :

Following are the sample codes to Get & Set the in Cloud Firestore:

One of the common ways to get and set the data is by using StreamBuilder. Another way is to have a function.

1. To Set Data :

2. To Get Data :

3. To Delete Data:

So this, concludes most of the common things we can do with Firebase. Firebase provides more awesome tools like MLKit which we might cover in future blogs.