Firebase Integration, Firebase Authentication, Firestore | RRTutors
Implement Flutter User Authentication, File Storage, Real-time Database, and Analytics with Firebase. Get started with this complete guide on rrtutors.com.
Last updated Jul 13, 2019
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