[英]I am new to flutter, does anyone knows how to connect flutter sign up with firebase?
I did the front end using flutter but I don't know how to connect it to the firebase auth.我使用 flutter 做了前端,但我不知道如何将它连接到 firebase 授权。 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.我试图关注这么多资源,但我仍然对它的后端感到困惑。
Flutter firebase authetication link Flutter firebase 认证链接
please follow this documentation to understand the whole process请按照此文档了解整个过程
in a nutshell简而言之
First you have to configure the firebase properly首先你必须正确配置 firebase
integrate the firebase with project properly将 firebase 与项目正确集成
then follow the below code for signIn using email & password just for reference然后按照以下代码使用 email 登录,密码仅供参考
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; } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.