I'm struggling with a problem on a registration page. The user can input the fields name, email and password( [1]: https://i.stack.imgur.com/FzhuR.png) If done correctly, an account is being made and user goes to the landing page. The time he waits will be indicated by an circularprocessindicator ( [1]: https://i.stack.imgur.com/9wjfC.png).
Problem is that when a user fills in something wrong and presses registration button, the processindicator starts en keeps running. The registration button is gone and there is no way to go forward. My question is how do I stop the processindicator when an error in one of the field occur?
Any help would be greatly appriciated.
This is the code:
class RegisterPage extends StatefulWidget {
@override
_RegisterPageState createState() => _RegisterPageState();
}
class _RegisterPageState extends State<RegisterPage> {
final _registerFormKey = GlobalKey<FormState>();
final _nameTextController = TextEditingController();
final _emailTextController = TextEditingController();
final _passwordTextController = TextEditingController();
final _focusName = FocusNode();
final _focusEmail = FocusNode();
final _focusPassword = FocusNode();
bool _isProcessing = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
_focusName.unfocus();
_focusEmail.unfocus();
_focusPassword.unfocus();
},
child: Scaffold(
appBar: AppBar(
iconTheme: IconThemeData(color: Color.fromRGBO(132, 76, 130, 1)),
title: Text('Registreren',
style: TextStyle(color: Color.fromRGBO(132, 76, 130, 1))),
centerTitle: true,
backgroundColor: Color.fromRGBO(250, 202, 48, 1),
),
body: Center(
child: SingleChildScrollView(
reverse: true,
padding: EdgeInsets.all(32),
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 120.0,
width: 120.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/logo.jpg'),
fit: BoxFit.fill,
),
),
),
SizedBox(height: 24.0),
Form(
key: _registerFormKey,
child: Column(
children: <Widget>[
TextFormField(
controller: _nameTextController,
focusNode: _focusName,
validator: (value) => Validator.validateName(
name: value,
),
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color:Color.fromRGBO(132, 76, 130, 1))),
hintText: "Naam ouder",
hintStyle: TextStyle(color: Color.fromRGBO(132, 76, 130, 1)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color.fromRGBO(250, 202, 48, 1))),
errorBorder: UnderlineInputBorder(
borderRadius: BorderRadius.circular(6.0),
borderSide: BorderSide(
color: Colors.red,
),
),
),
),
SizedBox(height: 16.0),
TextFormField(
controller: _emailTextController,
focusNode: _focusEmail,
validator: (value) => Validator.validateEmail(
email: value,
),
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color:Color.fromRGBO(132, 76, 130, 1))),
hintText: "Email adres",
hintStyle: TextStyle(color: Color.fromRGBO(132, 76, 130, 1)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color.fromRGBO(250, 202, 48, 1))),
errorBorder: UnderlineInputBorder(
borderRadius: BorderRadius.circular(6.0),
borderSide: BorderSide(
color: Colors.red,
),
),
),
),
SizedBox(height: 16.0),
TextFormField(
controller: _passwordTextController,
focusNode: _focusPassword,
obscureText: true,
validator: (value) => Validator.validatePassword(
password: value,
),
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color:Color.fromRGBO(132, 76, 130, 1))),
hintText: "Wachtwoord",
hintStyle: TextStyle(color: Color.fromRGBO(132, 76, 130, 1)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color.fromRGBO(250, 202, 48, 1))),
errorBorder: UnderlineInputBorder(
borderRadius: BorderRadius.circular(6.0),
borderSide: BorderSide(
color: Colors.red,
),
),
),
),
SizedBox(height: 32.0),
_isProcessing
? CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Color.fromRGBO(250, 202, 48, 1)),
)
: Row(
children: [
Expanded(
child: ElevatedButton(
onPressed: () async {
setState(() {
_isProcessing = true;
});
if (_registerFormKey.currentState!
.validate()) {
User? user = await FireAuth
.registerUsingEmailPassword(
name: _nameTextController.text,
email: _emailTextController.text,
password:
_passwordTextController.text,
);
setState(() {
_isProcessing = false;
});
if (user != null) {
Navigator.of(context)
.pushAndRemoveUntil(
MaterialPageRoute(
builder: (context) =>
ProfilePage(user: user),
),
ModalRoute.withName('/'),
);
}
}
},
child: Text(
'Registreren',
style: TextStyle(color: Color.fromRGBO(132, 76, 130, 1)),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Color.fromRGBO(250, 202, 48, 1)),
),
),
),
],
)
],
),
)
],
),
),
),
),
),
),
);
}
}
CodePudding user response：
You can try this
if (_registerFormKey.currentState!.validate()) {
User? user = await FireAuth.registerUsingEmailPassword(
name: _nameTextController.text,
email: _emailTextController.text,
password:_passwordTextController.text,);
setState(() {
isProcessing = false;
});
if (user != null) {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) =>
ProfilePage(user: user)),ModalRoute.withName('/'),);
}
} /// add code in this line
/// if use input wrong
/// update UI to show the button again
else {
setState(() {
isProcessing = false;
});
}
CodePudding user response：
It doesnt work as expected because you have set _isProcessing = false; inside the if condition.
You should call setState(() => _isProcessing = false) outside of if (_registerFormKey.currentState!.validate()) {...}
CodePudding user response：
I added this piece of code and now it works. Only thing for me to do is add a snackbar when someone presses registration button and it is a wrong input.
else {
setState(() {
isProcessing = false;
});