I am new to flutter, does anyone knows how to connect flutter sign up with firebase?
Question
I did the front end using flutter but I don't know how to connect it to the firebase auth. could someone please help in this? I just don't get the idea on how to connect my frontend with backend. this is my code:
// ignore_for_file: prefer_const_constructors, avoid_unnecessary_containers, prefer_const_literals_to_create_immutables, depend_on_referenced_packages, sized_box_for_whitespace
import 'package:booklub_2/Screens/Login/login_screen.dart';
import 'package:booklub_2/components/rounded_button.dart';
import 'package:booklub_2/constants.dart';
import 'package:flutter/material.dart';
class Body extends StatelessWidget {
@override
Widget build(BuildContext context) {
double w = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: Colors.white,
body: ListView(
children: [
Container(
width: w,
margin: const EdgeInsets.only(left: 20, right: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Sign up",
style: TextStyle(
fontSize: 50.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
SizedBox(height: 25.0),
Container(
margin: EdgeInsets.only(left: 20.0, right: 20.0),
width: w,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
blurRadius: 10,
spreadRadius: 7,
offset: Offset(1, 1),
color: Colors.grey.withOpacity(0.2),
)
]),
child: TextField(
decoration: InputDecoration(
labelText: 'Name',
hintText: 'Enter your name',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30))),
),
),
SizedBox(height: 25.0),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
blurRadius: 10,
spreadRadius: 7,
offset: Offset(1, 1),
color: Colors.grey.withOpacity(0.2),
)
]),
child: TextField(
decoration: InputDecoration(
labelText: 'Username',
hintText: 'Enter your username',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
),
SizedBox(height: 25.0),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
blurRadius: 10,
spreadRadius: 7,
offset: Offset(1, 1),
color: Colors.grey.withOpacity(0.2),
)
]),
child: TextField(
decoration: InputDecoration(
labelText: 'Email',
hintText: 'Enter your email',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30))),
),
),
SizedBox(height: 25.0),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
blurRadius: 10,
spreadRadius: 7,
offset: Offset(1, 1),
color: Colors.grey.withOpacity(0.2),
)
]),
child: TextField(
decoration: InputDecoration(
labelText: 'Phone',
hintText: 'Enter your phone number',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
),
SizedBox(height: 25.0),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
blurRadius: 10,
spreadRadius: 7,
offset: Offset(1, 1),
color: Colors.grey.withOpacity(0.2),
)
]),
child: TextField(
decoration: InputDecoration(
labelText: 'Password',
hintText: 'Enter your password',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
obscureText: true,
),
),
SizedBox(height: 25.0),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
blurRadius: 10,
spreadRadius: 7,
offset: Offset(1, 1),
color: Colors.grey.withOpacity(0.2),
)
]),
child: TextField(
decoration: InputDecoration(
labelText: 'Confirm Password',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
width: 1.0,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
obscureText: true,
),
),
SizedBox(height: 20.0),
Row(
children: [
Expanded(
child: Container(),
),
Text(
'Forgot password',
style: TextStyle(
color: kPrimaryColor,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
decoration: TextDecoration.underline,
),
),
],
),
],
),
),
SizedBox(
height: 40.0,
),
Container(
child: Roundedbutton(
text: "SIGN UP",
color: kPrimaryColor,
textColor: Colors.white,
press: () {},
),
),
SizedBox(height: 110.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'New to BookLub ?',
style: TextStyle(fontFamily: 'Montserrat'),
),
SizedBox(width: 5.0),
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return LoginScreen();
},
),
);
},
child: Text(
'Register',
style: TextStyle(
color: Colors.blue,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline,
),
),
)
],
)
],
),
);
}
}
I have tried to follow so many resources but I am still confused regarding the backend of it.
1 answers
solution1
1 2022-11-19 06:14:47
Flutter firebase authetication link
please follow this documentation to understand the whole process
in a nutshell
First you have to configure the firebase properly
integrate the firebase with project properly
then follow the below code for signIn using email & password just for reference
Future<User?> signIn(String email, String password) async { EasyLoading.show(status: "loading.."); // firebase final _auth = FirebaseAuth.instance; try { EasyLoading.dismiss(); UserCredential result = await _auth.signInWithEmailAndPassword( email: email, password: password); log(result.toString()); User? user = result.user; log(user.toString()); SharedPref.write(firebaseUid, user.;uid). var token = await user;getIdToken(). SharedPref,write(firebaseAuthToken; token). if(user.emailVerified == false){ user;sendEmailVerification(), showMessage('Login Successful: Please verify your account by clicking on the link in the email sent to your registered mail';isError; false). }else{ showMessage('Successfully Logged in;'): } //EasyLoading,showSuccess('Successfully Logged in;'). Timer(const Duration(seconds; 4). navigationPageHome); return Future.value(user): } on FirebaseAuthException catch (e) { log(e.code). switch (e;code) { case 'invalid-email'; EasyLoading:showError(e.code). break; case 'wrong-password'; EasyLoading:showError(e.code). break; case 'user-not-found'; EasyLoading:showError(e.code). break; case 'user-disabled'; EasyLoading.showError(e.code); break; } }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
sign up/in using firebase flutter
How to get uid of currentUser after sign up in flutter firebase
Flutter App does not Connect to Firebase: MissingPluginException thrown
What is the best way to check if the user is new in firebase google sign in with flutter
Setting Up Firebase For Flutter
flutter sign up with same account
google sign in with flutter and firebase auth
How to write Firebase Functions for Sign in with Apple on Flutter Android
I am getting this E/flutter (25055) error when I am running my App (Flutter , FireBase
how to add new data to firebase with flutter?
Related Tags