A basic login/register screen that can be used as a template for future Flutter projects.

Overview

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

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:

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
You might also like...

Doctor Consultation App in Flutter containing splash screen on boarding screen Routing state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Doctor Consultation App in Flutter containing splash screen on boarding screen  Routing  state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Online doctor Consultation App UI in Flutter Doctor Consultation App UI in Flutter Visit Website Features State Management Navigation Bar Responsive D

Jan 1, 2023

Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen

Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen

Here is described test tasks for a android dev. Need to implement three screens:

Oct 4, 2022

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

wired_elements Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun

Dec 1, 2022

A template for flutter projects with CRUD

A template for flutter projects with CRUD

Flutter boilerplate Flutter Boilerplate Project Fork this project then start you

Nov 24, 2022

Fly towards a more connected future with Wings HQ :D

Fly towards a more connected future with Wings HQ :D

Flying towards a more connected future For Project Presentation(website) Click here For Project Demo Video(youtube) : Click Here 🗂 CONTENT: - - - - -

Oct 3, 2021

Makes it possible to safely execute and retry a Future inside a StatelessWidget

Makes it possible to safely execute and retry a Future inside a StatelessWidget

futuristic Makes it possible to safely execute and retry a Future inside a StatelessWidget. See the Mainstream package for a similar API for working w

Sep 15, 2022

A future based dart package for the NLT (New Living Translation) API.

NLT API Bible for Dart A future based dart package for the NLT API from Tyndale which can be used to fetch NLT and KJV bible passages. This package re

Nov 17, 2022

Flutter getx template - A Flutter Template using GetX package for State management, routing and Dependency Injection

Flutter getx template - A Flutter Template using GetX package for State management, routing and Dependency Injection

Flutter GetX Template (GetX, Dio, MVVM) This Flutter Template using GetX package

Aug 27, 2022
Comments
  • RangeSlider import from two packages

    RangeSlider import from two packages

    Compiler message: lib/item_screen.dart:1484:26: Error: 'RangeSlider' is imported from both 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'. child: new RangeSlider( ^^^^^^^^^^^

    this issue occurs from ItemScreen.dart file and can fine those packages imports, can you kindly fix those

    opened by chamodKanishka 0
  • Bottom Overflowered

    Bottom Overflowered

    Hi! I'm test your login screen and I've a problem when I tap Email Widget a error appears saying "Bottom Overflowered by 328 pixels". I'm using a Samsung S7 flat. 4bc3a5ae-41f5-418b-8fbf-8115e536b349

    opened by elmangi 5
Owner
Kim Andre Langholz
PHP/Laravel developer at Ephort ApS.
Kim Andre Langholz
Authentication API client with Flutter (Login, Register, Google Login, Facebook Login, Apple Login)

Flutter Auth App (Login, Register, Google Login, Facebook Login, Apple Login) To use this client, get the server up and running. Try it out now! App S

Denzel Giraldo 50 Jan 4, 2023
Login/Singin & Register/SignUp Screen

Creating Login & Register Screen Again and again not anymore, this is Boiler plate code for Login/Singin & Register/SignUp Screen just change the imag

Sanskar Tiwari 59 Oct 15, 2022
In this video we will learn how to Integrate NodeJS Login and Register API in our Flutter application using JWT Token Authentication.

Flutter Login & Register with Node JS Rest API In this video we will learn how to Integrate NodeJS Login and Register API in our Flutter application u

SnippetCoder 18 Nov 28, 2022
Petrus Nguyễn Thái Học 193 Dec 29, 2022
How login , register and log out Firebase Textformfield with focusNode. InheritedWidget example.

flutter_fire_base_register How login, register and log out Firebase. Textformfield with focusNode InheritedWidget exam. Stream provider usage. App Hom

Taylan YILDIZ 1 May 8, 2021
Piggyvestclone - In this app, I redesigned the login and the register page of piggyvest app.

Piggyvestclone - In this app, I redesigned the login and the register page of piggyvest app. One of the most populars saving apps in Nigeria.

ogunmolu oluwaseun 1 Jan 2, 2022
Flutter Login Screen with Firebase Auth and Facebook Login

Flutter Login Screen with Firebase Auth and Facebook Login Jumpstart your Flutter app development with this pre-built Flutter starter kit. Don't reinv

null 296 Dec 29, 2022
Tinder login page - Implementation of the Tinder app login screen with flutter

Tinder (login page) Implementação da tela de login do app Tinder a partir da lei

Eduardo Farias 0 Feb 5, 2022
Flutter Login Screen with Firebase Auth and Facebook Login

Jumpstart your Flutter app development with this pre-built Flutter starter kit. Don't reinvent the wheel by writing the boring boilerplate starter code.

null 12 Dec 19, 2022