FlutterCore Logo
  • Home
  • Components
    • Alert
    • Button
    • Calendar
    • Color
    • Dialog
    • i18n
    • Indicator
    • Picker
    • Popup
    • Rating
    • Reports
    • Slider
    • Swipe
    • Tabbar
    • Table
    • Timeline
    • Toast
    • Web
  • Input
    • Authentication
    • Autocomplete
    • Date/Time Picker
    • Editor
    • Forms
    • Keyboard
    • Note
    • Password
    • Pin
    • Search
    • Text
    • Validation
    • Verification
  • Media
    • Audio
    • Charts
    • Gallery
    • Images
    • Maps
    • Music
    • Shape
    • Video
  • Ui
    • Animation
    • Cards
    • Carousel
    • Chat
    • Design
    • Drawer
    • Flip
    • Grid
    • Intro Page
    • Layout
    • ListView
    • Login Page
    • Material Design
    • Menu
    • Navigation
    • Progress
    • Splash Screen
  • Tutorial
    • Example
  • Application
    • Calculator
    • Clock
    • Library
    • Plugin

Flutter Login Screen With Firebase

March 5, 2020 Login Page, Ui

A Flutter / Firebase login screen

A simple flutter/dart based login-screen that connects with Firebase Auth to enable users to sign-in/up with Email or through Facebook.

It’s created as a template that I or you can use in upcoming projects instead of having to reinvent the wheel over and over again.

Flutter Login Screen With Firebase

Getting Started With This Template

As it’s based on Firebase and uses Facebook to login, you’ll need to do the following to make it work:

1) Register your app on Firebase

Register on https://firebase.google.com/ and create your app in there.

Make sure to register it as both an android and iOS app.

Go to Authentication -> Sign-In method and enable both Email/Password & Facebook. Follow Firebase’ notes to set it up correctly.

When done, go to the settings page for your app and fill out the following:

Android:

  • Package name of your flutter project
  • SHA fingerprints for all your development environments.

When done, download the google-services.json file and place it in your android/app/ folder.

iOS

  • AppNickname
  • BundleID from your flutter project.

When done,download the GoogleService-Info.plist file and place it in the ios/runner/ folder.

IMPORTANT: This file should also be added to your Runner.xcodeproj through Xcode.

When you open the file in Xcode, find the Runner project in the left side menu and right click it.

Select "Add Files to Runner", navigate to the file you just added to your ios/runner/ folder and select it.

Now just close Xcode.

Additional resources:

  • https://firebase.google.com/docs/flutter/setup
  • https://pub.dev/packages/firebase_auth

2) Register your app on Facebook

Follow this quick setup guide: https://medium.com/flutterpub/firebase-fb-sign-in-and-flutter-7ab4bdc7172e

Easy changes you can make:

As I’ve decided to follow the MVC pattern, you can easily change the text by navigating to the Model class in the main file. Also, all colors & text-styling should be easily changed by navigating to the Theme in the bottom of the main file.

Update Notes:

09-09-2019: Committed the vers. 1.00 of the login_screen. It’s tested on both iOS and Android and should work fine on devices larger than an iPhone SE.

Roadmap:

  • Improve UX by testing it on additional phones. Making sure there’re no overflow errors.
  • Add error messages to login form

Source Code

Please Visit Flutter Login Screen With Firebase Source Code at GitHub

Related posts:

Flutter Login Screen With FirebaseFlutter Login Screen With Firebase Flutter Authentication and Splash ScreenFlutter Authentication and Splash Screen Flutter Login UI DesignBest 6 Flutter Login Screen Design Flutter Friendly Chat AppFlutter Friendly Chat With Firebase
  • Flutter Login Screen With Firebase
Flutter Login UI DesignPrevious

Best 6 Flutter Login Screen Design

Flutter Timeline WidgetNext

Flutter Timeline Widget

Android Mining Monitor Application

Pool Supported : Ethermine, Nanopool, 2Miners, Flexpool, Herominers, Hiveon

Go to Google Playstore

Recent Posts

  • Flutter File UtilsFlutter File Utils
  • Flutter PDFFlutter PDF
  • Produ Flutter Task Cross PlatformProdu Flutter Task Cross Platform
  • Flutter Animation DirectorFlutter Animation Director
  • Draggable Flutter ListDraggable Flutter List
  • Flutter Section Table ViewFlutter Section Table View
  • Image and Location Picker FlutterImage and Location Picker Flutter

FlutterCore © 2023