Login UI with Firebase in Flutter

Login UI in Flutter with Firebase

This article is about Login with Firebase in Flutter.  The purpose of this article is to help the reader understand Firebase in a simple way.

Innoventix Solutions Developed UI of Login/Sign-up Form using Firebase.

What is Firebase?

Firebase is a Backend-as-a-Service (BaaS) app development platform that provides hosted backend services such as a Realtime database, cloud storage, authentication, crash reporting, machine learning, remote configuration, and hosting for your static files. Use Firebase to host your Flutter app on the web.

Add Firebase to your Flutter app:

Step 1: Create a Firebase project

Step 2: Register your app with Firebase

Step 3: Add a Firebase configuration file

Step 4: Add Flutter Fire plug-in

⦁        Ensure that your app is not currently running in your emulator or on your device.

⦁        From the root directory of your Flutter app, open your pubspec.yaml file.

⦁        Add the Flutter Fire plug-in for the Firebase Core Flutter SDK

dependencies:

flutter:

sdk: flutter

# Add the dependency for the Firebase Core Flutter SDK

firebase_core: ^0.4.0+9

Add the Flutter Fire plug-in for the Firebase products that you want to use in your app.

dependencies:

flutter:

sdk: flutter

# Check that you have this dependency (added in the previous step)

firebase_core: ^0.4.0+9

# Add the dependency for the FlutterFire plug-in for Google Analytics

firebase_analytics: ^5.0.2

# Add the dependencies for any other Firebase products you want to use in your app

# For example, to use Firebase Authentication and Cloud Firestore

firebase_auth: ^0.14.0+5

cloud_firestore: ^0.12.9+5

⦁        Run flutter packages get

For more information about managing packages and plug-in, refer to Using Packages.

⦁        If you have added Analytics, run your app to send verification to Firebase that you’ve successfully integrated Firebase. Otherwise, you can skip the verification step.

Visit this link – https://firebase.google.com/docs/flutter/setup

UI is available in 2 modes:

Light mode & Dark mode

Dark mode UI:

Light mode UI:

This UI consists of various types of the plug-in, widgets functionality which are

⦁        google_sign_in: ^4.0.14

⦁        firebase_auth: ^0.15.0+1

⦁        firebase_messaging: ^6.0.2

⦁        flutter_launcher_icons: “^0.7.3”

⦁        flutter_facebook_login: ^3.0.0

⦁        http: ^0.12.0+2

⦁        community_material_icon: ^3.5.95

⦁        fluttertoast: ^3.1.3

⦁        Gradient button

⦁        Login with Google

⦁        Login with Facebook

⦁        Login with Phone

Why Use Firebase in Flutter:

• Real-time Database: Firebase has a real-time and cloud-based database where you can store data is JSON and synchronized continuously to all connected clients. If you want to create an Android, iOS, or Web app which provides real-time updates to users without creating Database or API then you should use firebase. It is the capability to manage backend components of applications. The real-time database is the foremost advantage of the Firebase.
• Authentication: There are many apps that need identification of a user to save user data in the cloud to provide an enhanced experience on various devices. Firebase provides instant UI Libraries and SDKs for authenticating clients across applications using email id, password, or username. Here you can integrate various sign-in techniques to allow users to log in to your app.
• Hosting: Firebase provides fast, secure, static, and production-grade hosting for developers. It allows developers to efficiently deploy web apps and static content to a CDN (Content Delivery Network).
• Storage: It is another best advantage of Firebase that it is very useful when you want to create an app for storing and serving files of users such and images and videos