How to include important features to a sign up/register page with flutter
Question
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
- I used a container to design my button and wrapped it in a gesture detector. I want to connect the button to the page view and the smooth page indicator so that when the button is pressed, it moves to the next page. I also want to disable the swiping and only let the button be the one to go to the next page.
- I also want to make the button inactive unless a valid email or password is filled on each page. The button shouldn't be clickable unless the field on that page is filled properly
- I also want there to be inactivity if the password and confirm password textfields don't match. Right now the button won't be active unless they match but I want the button edited differently when they don't match and I want a warning message under the textfield
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?
1 answers
solution1
0 2022-08-22 11:31:37
Please follow 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
You can copy standard registration/login flow (screens) into your App from firebase-ui patterns.
All the best!!!
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
flutter sign up with same account
Navigate to a page after user sign up in the android app in flutter using FirebaseAuth
How to get uid of currentUser after sign up in flutter firebase
How to restrict premium features of app in flutter?
Flutter: How to make user login automatically after register successfully?
Firebase: How do I register my Flutter app in app check?
save dummy image to FirebaseStorage flutter for user update them later after sign up
How to write Firebase Functions for Sign in with Apple on Flutter Android
Flutter Firestore Issue: Not able to store Sign Up form data in Cloud Firestore DB, instead hard coded data is getting stored
Storing a username on sign up only displays after page refresh (Firebase)
Related Tags