[英]How to include important features to a sign up/register page with flutter
I want to include some major changes to the sign up page of my project but I'm afraid that if I create new classes and functions, I might disrupt what I already have.我想对我的项目的注册页面进行一些重大更改,但我担心如果我创建新的类和函数,我可能会破坏我已经拥有的东西。 This is what I have: enter image description here这就是我所拥有的:在此处输入图像描述
notice the text field design and this: enter image description here I included a page view into a container for the email, password and confirm password text fields and used a smooth page indicator so that it scrolls when you go to a new page enter image description here enter image description here注意文本字段的设计和这个:在此处输入图像描述我在 email、密码和确认密码文本字段的容器中包含了一个页面视图,并使用了平滑的页面指示器,以便当您将 go 滚动到新页面时它会滚动输入图像描述在此处输入图像描述
the warning message: enter image description here警告消息:在此处输入图像描述
the inactive button: enter image description here非活动按钮:在此处输入图像描述
this is the code I have currently right now the continue button is going to carry out a sign in method i created but i want it to be a continue button and change on the last page to a sign up button这是我目前拥有的代码,继续按钮将执行我创建的登录方法,但我希望它成为继续按钮并在最后一页更改为注册按钮
import 'dart:ffi';
import 'package:custigrow/Utilities/register_scroll.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:email_validator/email_validator.dart';
class Register extends StatefulWidget {
final VoidCallback showLogInPage;
const Register({
Key? key,
required this.showLogInPage,
}) : super(key: key);
@override
State<Register> createState() => _RegisterState();
}
class _RegisterState extends State<Register> {
bool _isObscure = true;
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
final _confirmPasswordController = TextEditingController();
@override
void dispose() {
_emailController.dispose();
_passwordController.dispose();
super.dispose();
}
late String _email, _password;
bool value = false;
final _controller = PageController();
Future signUp() async {
if (passwordConfirmed()) {
FirebaseAuth.instance.createUserWithEmailAndPassword(
email: _emailController.text.trim(),
password: _passwordController.text.trim());
} else {}
}
bool passwordConfirmed() {
if (_passwordController.text.trim() ==
_confirmPasswordController.text.trim()) {
return true;
} else {
return false;
}
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.all(20),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 10,
),
Row(
children: [
Image.asset(
"lib/assets/cancel.png",
height: 15,
color: Colors.green,
),
Expanded(
child: Center(
child: Text(
"Sign Up",
style: TextStyle(fontSize: 25),
))),
],
),
SizedBox(
height: 30,
),
//information
Column(
children: [
Text(
"Set up your account and manage your",
style: TextStyle(fontSize: 21.2, color: Colors.green),
),
Text(
"inventory with ease",
style: TextStyle(fontSize: 21.2, color: Colors.green),
),
],
),
SizedBox(
height: 40,
),
Container(
height: 300,
child:
//page view for sign up
PageView(
controller: _controller,
scrollDirection: Axis.horizontal,
children: [
//enter email page
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Container(
child: Column(
children: [
Text(
"Let's start with your email",
style: TextStyle(
fontSize: 23,
),
),
SizedBox(
height: 45,
),
TextField(
controller: _emailController,
obscureText: false,
maxLines: null,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: "Email Address",
labelStyle: TextStyle(
fontSize: 20, color: Colors.grey),
floatingLabelStyle: TextStyle(
color: Colors.black, fontSize: 20),
hintText: "Email Address",
hintStyle: TextStyle(fontSize: 0.5),
isDense: true,
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
width: 2.0, color: Colors.grey),
borderRadius: BorderRadius.circular(7),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.green, width: 2.0),
borderRadius: BorderRadius.circular(7)),
),
onChanged: (value) {},
),
],
),
),
),
//enter password page
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Container(
child: Column(
children: [
Text(
"Create a password to secure your account",
style: TextStyle(
fontSize: 23,
),
),
SizedBox(
height: 20,
),
TextField(
controller: _passwordController,
obscureText: _isObscure,
// keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: "Password",
labelStyle: TextStyle(
fontSize: 20, color: Colors.grey),
floatingLabelStyle: TextStyle(
color: Colors.black, fontSize: 20),
hintText: "Password",
hintStyle: TextStyle(fontSize: 0.5),
isDense: true,
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
width: 2.0, color: Colors.grey),
borderRadius: BorderRadius.circular(7),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.green, width: 2.0),
borderRadius: BorderRadius.circular(7)),
suffixIcon: IconButton(
icon: Icon(
_isObscure
? Icons.visibility_off
: Icons.visibility,
color: Colors.green,
),
onPressed: () {
setState(() {
_isObscure = !_isObscure;
});
})),
onChanged: (value) {},
),
],
),
),
),
//confirm pasword page
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Container(
child: Column(
children: [
Text(
"Confirm your password",
style: TextStyle(
fontSize: 23,
),
),
SizedBox(
height: 45,
),
TextField(
controller: _confirmPasswordController,
obscureText: _isObscure,
// keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: "Confirm Password",
labelStyle: TextStyle(
fontSize: 20, color: Colors.grey),
floatingLabelStyle: TextStyle(
color: Colors.black, fontSize: 20),
hintText: "Password",
hintStyle: TextStyle(fontSize: 0.5),
isDense: true,
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
width: 2.0, color: Colors.grey),
borderRadius: BorderRadius.circular(7),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.green, width: 2.0),
borderRadius: BorderRadius.circular(7)),
suffixIcon: IconButton(
icon: Icon(
_isObscure
? Icons.visibility_off
: Icons.visibility,
color: Colors.green,
),
onPressed: () {
setState(() {
_isObscure = !_isObscure;
});
})),
onChanged: (value) {},
),
],
),
),
),
],
),
),
Center(
child: SmoothPageIndicator(
controller: _controller,
count: 3,
effect: ExpandingDotsEffect(activeDotColor: Colors.green),
),
),
SizedBox(
height: 20,
),
//continue button
GestureDetector(
onTap: signUp,
child: Container(
child: Center(
child: Padding(
padding: const EdgeInsets.all(20),
child: Text(
"Continue",
style: TextStyle(fontSize: 19, color: Colors.white),
),
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.green),
),
),
SizedBox(
height: 30,
),
//Already have an account? Sign in
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Already have an account?",
style: TextStyle(fontSize: 15),
),
GestureDetector(
onTap: widget.showLogInPage,
child: Text(
" Sign in",
style: TextStyle(color: Colors.green, fontSize: 16),
),
)
],
),
SizedBox(
height: 20,
),
Row(children: [
Expanded(child: Container(height: 1, color: Colors.black)),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Text('Or continue with:'),
),
Expanded(child: Container(height: 1, color: Colors.black)),
]),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade600),
borderRadius: BorderRadius.circular(5)),
height: 70,
child: Image.asset(
"lib/assets/google.png",
height: 40,
),
),
Text("Or"),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade600),
borderRadius: BorderRadius.circular(5)),
height: 70,
child: Image.asset(
"lib/assets/facebook.png",
height: 40,
),
)
],
),
],
),
),
),
),
);
}
}
Is there a way to do all this without disrupting the code I already have?有没有办法在不破坏我已经拥有的代码的情况下完成这一切?
Please follow flutterfire_ui,请关注flutterfire_ui,
https://github.com/firebase/flutterfire/tree/master/packages/flutterfire_ui https://github.com/firebase/flutterfire/tree/master/packages/flutterfire_ui
https://github.com/firebase/flutterfire/tree/master/packages/flutterfire_ui/lib/src/auth/screens https://github.com/firebase/flutterfire/tree/master/packages/flutterfire_ui/lib/src/auth/screens
You can copy standard registration/login flow (screens) into your App from firebase-ui patterns.您可以将标准注册/登录流程(屏幕)从 firebase-ui 模式复制到您的应用程序中。
All the best!!!一切顺利!!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.