Flutter - Firebase Integration - Firebase Authentication, Firestore

Hello Guys,

In this tutorial we are going to learn about Flutter Firebase authentication, Firestore integration.

Step 1:
Create a project in Any IDE.

Step 2:
Login to Firebase console

Then Create a project.
Once Project created you will navigates to Dashboard. There you will find the options like Android,Ios,Web
Select Android and download google-services.json file and put this inside your android app folder.

in Android Add 

classpath 'com.google.gms:google-services:4.2.0'

in Project level gradle file

and in App level gradle file add 

implementation 'com.google.firebase:firebase-core:17.0.0' in dependencies block and
apply plugin: 'com.google.gms.google-services' at the end of the file

Now go to pubspec.yaml file and add below dependencies under flutter SDK

cloud_firestore: ^0.12.7
firebase_auth: ^0.11.1+7

    

 

Before going to next step Read my previous post Flutter SQFlite Integration

Step 3:
Create a class files like below

Splash Screen

import 'package:flutter/material.dart';

import 'databases/UserDatabase.dart';
import 'home/home.dart';
import 'main.dart';
import 'models/user.dart';
import 'signup_login/LoginPage.dart';

class SplashPage extends StatefulWidget{
  @override
  State createState() {
    // TODO: implement createState
    return SplashState();
  }

}

class SplashState extends State
{

  int login=101;
  int loginData;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    loginData=login;
    new Future.delayed(const Duration(seconds: 1), () {
      UserDatabase.instance.getUser().then((result){
        setState(() {
          loginData=result;
          if(loginData==0)
            Navigator.pushReplacementNamed(context, "/login");
          else  Navigator.pushReplacementNamed(context, "/home");
          print("Called Return value on state  $loginData");
        });
      });

    });

  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Container(
          child: Image.asset("splash_img.png",fit: BoxFit.cover,),

        ));

  }
}

Login Screen

 

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_firestroe/databases/UserDatabase.dart';
import 'package:flutter_firestroe/models/user.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class LoginPage extends StatefulWidget{
  @override
  State createState() {
    // TODO: implement createState
    return LoginState();
  }

}
class LoginState extends State
{
  final _formKey = GlobalKey();
  final _scaffoldKey = GlobalKey();
  final _emailEditController=TextEditingController();
  final _passwordController=TextEditingController();
  final FocusNode _mobileFocus = FocusNode();
  final FocusNode _passwordFocus = FocusNode();
  FirebaseAuth _auth=FirebaseAuth.instance;
  Firestore _firestore=Firestore.instance;

  String email_pattern = r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
  Size size;
  @override
  Widget build(BuildContext context) {
    size = MediaQuery.of(context).size;
    return new Scaffold(
      key: _scaffoldKey,
      backgroundColor: Colors.transparent,
      body: Stack(
        children:[
          Container(
            height: size.height,

            decoration:BoxDecoration(

                gradient: LinearGradient(
                  colors: [Colors.deepOrange,Colors.orange/*,const Color(0XFF388e3c)*/,],

                ),
                borderRadius: BorderRadius.only(

                  topRight: Radius.circular(20),
                  topLeft: Radius.circular(20),
                )
            ) ,
          ),
          Container(
          height: size.height,

           decoration:BoxDecoration(

             gradient: LinearGradient(
                 colors: [const Color(0XFF424242),const Color(0XFF303030),const Color(0XFF212121),],

             ),
             borderRadius: BorderRadius.only(
                 bottomLeft: Radius.circular(480),
                topRight: Radius.circular(20),
                topLeft: Radius.circular(20),
             )
           ) ,
          ),

          Padding(
            padding: EdgeInsets.only(left: 20,right: 20),
            child: Form(
                key: _formKey,
                child:
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.filter_drama,size: 100,
                      color: Colors.white,
                    ),
                    SizedBox(height: 20,),

                    TextFormField(
                      controller: _emailEditController,
                      textInputAction: TextInputAction.next,
                      validator: (value){
                        RegExp regex =RegExp(email_pattern);
                        if (!regex.hasMatch(value))
                          return 'Enter Valid Email';
                        else
                          return null;
                      },
                      keyboardType: TextInputType.emailAddress,
                      style: getTextStyle(),
                      decoration: customInputDecoration("Enter email id"),),
                    SizedBox(height: 20,),
                    TextFormField(
                      textInputAction: TextInputAction.done,
                      controller: _passwordController,
                      keyboardType: TextInputType.text,

                      obscureText: true,
                      focusNode: _passwordFocus,
                      validator: (value){
                        if(value.isEmpty)
                        {
                          return "Enter Password";
                        }
                        return null;
                      },
                      style: getTextStyle(),
                      decoration: customInputDecoration("Enter password"),
                    ),
                    SizedBox(height: 20,),
                    RaisedButton(onPressed: (){

                      if(_formKey.currentState.validate())
                      {
                        showDialog(context:
                        context,
                            barrierDismissible: false,
                            builder: (_)=>Material(
                              color: Colors.transparent,
                              child: Center(
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    CircularProgressIndicator(),
                                    Text("Connecting..."),
                                  ],
                                ),
                              ),
                            )


                        );

                        _auth.signInWithEmailAndPassword(email: _emailEditController.text, password: _passwordController.text)
                        .then((res){
                          print(res.uid);
                          _firestore.collection("users").document(res.uid).get().then(
                              (_snapshot){

                                UserDatabase.instance.insertUser(  User.fromMap(_snapshot.data)).then((res){

                                  Navigator.pop(context);
                                  _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("Succesfully LogIn"+res.toString())));
                                  Navigator.pushReplacementNamed(context, "/home");
                                });

                              }
                          ).catchError((err){
                            Navigator.pop(context);
                            _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text(err.message)));
                          });

                        }).catchError((err){
                          Navigator.pop(context);
                          _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text(err.message)));
                        });
                      }

                    }, shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(18),
                    ),
                      color: Colors.orange,
                      child: Text("Login", style: TextStyle(color: Colors.white,fontSize: 20),),
                    ),

                    FlatButton(
                      child: Text("Don't have account, Signup?",style: TextStyle(color: Colors.white),),
                      onPressed: (){
                        Navigator.pushReplacementNamed(context, "/signup");
                      },
                    )
                  ],
                )
            ),
          )
        ] ,
      ),
    );
  }
  TextStyle getTextStyle(){
    return TextStyle(
        fontSize: 18,
        color: Colors.white
    );
  }

  InputDecoration customInputDecoration(String hint)
  {

    return InputDecoration(
      hintText: hint,
      hintStyle: TextStyle(
          color: Colors.white70
      ),
      contentPadding: EdgeInsets.all(10),
      enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: BorderSide(
              color: Colors.white
          )
      ),
      focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: BorderSide(
              color: Colors.white
          )
      ),

    );
  }
  /*[const Color(0XF46326),const Color(0XF57b28),]*/
}

FirebaseAuth _auth=FirebaseAuth.instance;

Firestore _firestore=Firestore.instance;

These two lines will create FirebaseAuthentication, Firestore instances.

Home Screen

import 'package:flutter/material.dart';
import 'package:flutter_firestroe/databases/UserDatabase.dart';
import 'package:flutter_firestroe/models/user.dart';

class Homepage extends StatefulWidget{
  @override
  State createState() {
    // TODO: implement createState

    return HomeState();
  }

}

class HomeState extends State{
  Size size;
  User user;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    UserDatabase.instance.getUserData().then((result){
      setState(() {
        user=result;
      });

    });
  }
  @override
  Widget build(BuildContext context) {
    size=MediaQuery.of(context).size;
    return Scaffold(
    backgroundColor: Colors.transparent,
      body: Stack(
        children: [
          Container(
            height: size.height,

            decoration:BoxDecoration(

                gradient: LinearGradient(
                  colors: [Colors.deepOrange,Colors.orange/*,const Color(0XFF388e3c)*/,],

                ),
                borderRadius: BorderRadius.only(

                  topRight: Radius.circular(20),
                  topLeft: Radius.circular(20),
                  bottomLeft: Radius.circular(20),
                  bottomRight: Radius.circular(20),
                )
            ) ,
          ),
          Scaffold(
            appBar: AppBar(
              title: Text("Home"),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(20),
                  topLeft: Radius.circular(20),
                )
              ),
              backgroundColor: Colors.deepOrange,
            ),
            backgroundColor: Colors.transparent,
            body: Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [

                  Column(

                    mainAxisAlignment: MainAxisAlignment.center,

                    children: [
                         Center(
                          child: (user==null)?null:Text("Welcome User "+user.name,
                            style:TextStyle(
                              color: Colors.white,
                              fontSize: 22,
                            ) ,),
                        ),
                      Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: RaisedButton(
                            onPressed: (){
                              UserDatabase.instance.deleteUser(user.email).then((res){
                              if(res==1)
                              {
                                  Navigator.pushReplacementNamed(context, "/login");
                              }

                              });

                            },
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(15),

                            ),
                            color:Colors.pink,
                            child: Text("Logout", style: TextStyle(color: Colors.white
                            ),)
                        ),
                      )
                    ],
                  ),

                ],
              ),
            ),
          ),
        ],

      )
    );
  }

}

get the complete code at  rrtutors  github account

 

TAGS : Flutter, Flutter Firebase, Flutter Firebase Authentication, FireStore, Flutter Routes, Flutter Navigators

Flutter Local database, SQFlite




Related Questions View All