Scribd
Upload
5 views14 pages

Lab Manual 12

The document outlines a lab focused on integrating Firebase with Flutter, detailing experiments such as creating user interfaces, Firebase authentication, and app testing. It provides a step-by-step guide for setting up a Firebase project, adding a Flutter app, and configuring necessary files and dependencies. The lab tasks include authenticating user screens and implementing Google authentication.

Uploaded by

mous200497
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views14 pages

Lab Manual 12

The document outlines a lab focused on integrating Firebase with Flutter, detailing experiments such as creating user interfaces, Firebase authentication, and app testing. It provides a step-by-step guide for setting up a Firebase project, adding a Flutter app, and configuring necessary files and dependencies. The lab tasks include authenticating user screens and implementing Google authentication.

Uploaded by

mous200497
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

LAB 12

Activities
List of Experiments
 Creation of a user interface using Flutter widgets.
 Setting up a Firebase with Flutter and performing Firebase authentication.
 Adjustment of padding, spacing, and alignment for better visual appearance.
 Testing the app on different devices and screen sizes to ensure
responsiveness.
 Identifying and debugging issues or errors encountered during testing.

What you will LEARN

 How to integrate a Firebase with Flutter app and perform Firebase


authentication.
 how to arrange widgets, apply styling, and manage layout to create visually
appealing and functional user interfaces.
 Application testing on different devices.

Firebase is a powerful and versatile platform that provides various backend services for mobile
and web applications. For Flutter developers, integrating Firebase into their projects can enhance
the app’s functionality and improve user engagement.
Step 1: Set Up Firebase Project
1- Go to the Firebase Console (https://console.firebase.google.com/) and sign in with your
Google account.
2- To create a new Firebase project, click on the option ‘Add Project’.

3- Enter your project name and select your country or region. Click on “Continue.”
4- On the next screen, enable Google Analytics for your project (optional but recommended for
better insights). Click on “Continue”.
5- Configure Google Analytics, Click on the “select an account” and choose the “Default
Account for Firebase”. Click on “Create Project”.
 After Creating project, Firebase loading indicator will appear and it’ll take 5 seconds.
Click on “Continue”.
 Now that our Firebase project is successfully created, it’s time to add our Flutter
application to this Firebase project.
Step 2: Add Flutter Android App to Firebase
1- After creating the Firebase project, click on the “Add app” button (represented by the Android
logo).
2- Register your app by providing the “Android package name”, and the “App nickname”
(optional) and “Debug signing certificate SHA-1” (optional).

3- To get the “Android package name” Open your IDE (Android Studio or Vs Code) and in the
“android” directory open the app level “build.gradle” file.
Also change the default “minSdkVersion” to “21”. Because some Firebase Dependencies
requires higher SDK versions.

After getting the “Android package name” paste it in the field and click on the “Register app”.
Step 3: Download Configuration Files
Download the “google-services.json” file and paste it in the “android/app” directory. After this
Click “next”.
Now the next step is to add the Firebase SDK to Flutter app. To make the google-
services.json config values accessible to Firebase SDKs, you need the Google services Gradle
plugin.
 Add the plugin as a depencdency to your project-level “build.gradle” file.
 Root-level (project-level) Gradle file (<project> /build.gradle):
 Replace the “id ‘com.google.gms.google-services’ version ‘4.3.15’ apply false” with the
“classpath “com.google.gms:google-services:4.3.15””.

Then, in your module (app-level) build.gradle file, add both the google-services plugin and any
Firebase SDKs that you want to use in your app:
 Module (app-level) Gradle file (<project>/<app-module>/build.gradle):
 Replace the “id” with the “apply plugin” and paste it.

 After adding the google-services.json plugins in the “app-level” and “project-level”


Gradle files. Click “Next”.
 Now here Click on the “Continue to console” and Congratulation our Android app is
successfully connect with Firebase.
Step 4- Adding Web app to Firebase
As our Android app is successfully added to Firebase console its time to add our next app which
will be Web. Click on the “Web Icon” in the Firebase Console to continue adding it.

Here it requires the “App nickname” and also if you want to setup the Firebase Hosting for this
app you can check the square. Click on the “Register App”.
In the next step we can apply two methods. One is if you’re using the “npm” (Node package
manager) you can run the following commads and add the following data.
The Second is to add manually all the data in the “main.dart”. We will use the second method
because i dont have the “npm” :
Step 5 — Adding Firebase Dependency
To Add the above data in the “main.dart”. First we have to add some Firebase Dependencies in
the “pubspec.ymal” file. Add the “firebase_core” package in the “pubspec.ymal” right below the
“cupertino_icons”.
This package allows us to initialize the Firebase into our App. Now open the “main.dart” and
make these changes.
Step 6: Initialize Firebase
First of all we import the “firebase_core” library
“import ‘package:firebase_core/firebase_core.dart’;
and then in the main() method we initialize our Firebase. Right below the
“WidgetsFlutterBinding.ensureInitialized();”, We are checking if the app is Web we’ll execute
the following configuration other wise in the else we’ll initialize the
“await Firebase.initializeApp();” .

Step 7: Test Firebase Integration


Now that all the configuration is done. It’s time to check that all the configuration works
correctly. Run your app on an Android emulator or physical device to ensure Firebase is correctly
integrated with your Flutter project. Verify the logs to ensure there are no errors related to
Firebase initialization.

Lab Task
 Authenticate the login, sign up, and forget password screen (created in the last lab) with
Firebase.
 Add google Authentication with firebase.

You might also like