• Apps
  • Templates
  • Animation
  • Dialog
  • Icons
  • Images
  • Login screen
  • Note

Flutter UI Kit Templates

  • facebook
  • twitter
  • instagram
  • pinterest
  • youtube
Search

Switch to the dark mode that's kinder on your eyes at night time.

Switch to the light mode that's kinder on your eyes at day time.

Menu

Flutter UI Kit Templates

Login
Search
Menu

You are here:

  1. Home
  2. Templates
  3. A basic login/register screen that can be used as a template for future Flutter
in Templates, Login screen

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

by James October 1, 2021, 8:07 am 1.2k Views

A Flutter / Firebase login screen

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

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

Getting Started With This Template

You’ll need to do the following to make it work because it’s based on Firebase and uses Facebook to login:

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

GitHub

https://github.com/KimLangholz/flutter_login_screen

See more

  • Previous article A very simple Login Page made with Flutter Web
  • Next article Inspired by Reflectly Login Screen Page in Flutter App

Written by James

You May Also Like

  • in Templates, Apps, Games, Quiz

    Amazing Quizzler App for iOS and Android

  • in Apps, Quiz, Templates

    An Amazing Quiz App With Timer In Flutter

  • in Weather, Apps, Templates

    An elegant and easy on the eyes weather app build with flutter

  • in Apps, Contacts, Templates

    A Beautiful Contact App using Flutter

More From: Templates

  • Amazing Quizzler App for iOS and Android

    by James November 5, 2021, 3:17 pm

  • An Amazing Quiz App With Timer In Flutter

    by James November 5, 2021, 3:08 pm

  • An elegant and easy on the eyes weather app build with flutter

    by James November 3, 2021, 2:37 pm

  • A Beautiful Contact App using Flutter

    by James November 3, 2021, 9:20 am

  • A note-taking app built with Flutter + Firebase

    by James November 1, 2021, 3:30 pm

  • Android Application to work with Location-based Data

    by James October 27, 2021, 2:22 pm

Don't Miss

  • in Login screen

    Provides login screen with login/signup functionalities

  • in Animation, Login, Login screen

    An awesome login page animated fastCode with Flutter

  • in Login screen

    A Phone number authentication + OTP login page built with flutter

  • in Animation, Login, Login screen

    Flutter Beautiful Login Page UI Design and Animation

  • in Button, Slide, Swipe

    An attractive swipe to confirm button for flutter

  • in Dialog

    A Phone Dialpad for your Flutter Application

A very simple Login Page made with Flutter Web

Inspired by Reflectly Login Screen Page in Flutter App

TEMPLATES

  • Amazing Quizzler App for iOS and Android

  • An Amazing Quiz App With Timer In Flutter

  • An elegant and easy on the eyes weather app build with flutter

  • A Beautiful Contact App using Flutter

  • A note-taking app built with Flutter + Firebase

  • Android Application to work with Location-based Data

  • Wallpaper application based on Pexels API

  • Wallpaper App made with Flutter with Dynamic Theming

TOP VIEWS

  • Provides login screen with login/signup functionalities

  • Flutter Beautiful Login Page UI Design and Animation

  • An awesome login page animated fastCode with Flutter

  • A Phone number authentication + OTP login page built with flutter

  • A simple yet elegant quiz app developed with Flutter

  • Time Picker widget with a spinner instead of a material time picker

  • Basic login and signup screen designed in flutter

  • A gorgeous login page built with flutter

© 2023 by FlutterKit.dev

  • Home
  • Contact Us
  • GDPR Privacy policy
Back to Top
Close
  • Apps
  • Templates
  • Animation
  • Dialog
  • Icons
  • Images
  • Login screen
  • Note
  • facebook
  • twitter
  • instagram
  • pinterest
  • youtube