Register screen check if textboxes are empty - flutter

Question

Hello guys i am trying to check if the input fields for my register screen are empty and give an error message for each one if any is empty.
I added the text editing controllers and the booleans for if each box is empty or not.
Then on button press it checks if there is no text in any of the fields and should display the error message for each of the field.
Right now it tells me that the text provided in this "errorText: _emptyboxmail ? 'field cannot be empty' : null," is dead code for each one.
If i change the boolean to true then it shows that null is dead code in code i gave above.
How do i make this work without having dead code? The program runs as usual it just not show me the error message if i leave the boxes empty
import 'package:club_mark_2/styles/style.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'userPreferences/user_details_preference.dart';
class RegisterScreen extends StatefulWidget {
const RegisterScreen({Key? key}) : super(key: key);
#override
_RegisterScreenState createState() => _RegisterScreenState();
}
class _RegisterScreenState extends State<RegisterScreen> {
#override
Widget build(BuildContext context) {
final registerEmail = TextEditingController();
final registerPassword = TextEditingController();
final verifyPassword = TextEditingController();
final registerName = TextEditingController();
bool _emptyboxmail = false;
bool _emptyboxpass = false;
bool _emptyboxverify = false;
bool _emptyboxregistername = false;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
#override
void dispose() {
// Clean up the controller when the widget is disposed.
registerEmail.dispose();
registerPassword.dispose();
verifyPassword.dispose();
registerName.dispose();
super.dispose();
}
return Scaffold(
backgroundColor: Colors.transparent,
body: SizedBox(
width: width,
height: height,
child: Stack(children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 15, top: 165, right: 15),
child: ListView(
children: [
Center(
child: Text(
'SIGN UP',
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
),
),
),
Container(
padding: EdgeInsets.all(8.0),
child: TextFormField(
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
errorText: _emptyboxregistername
? 'field cannot be empty'
: null,
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.withOpacity(0.5)),
borderRadius: BorderRadius.circular(20)),
hintText: 'Full Name',
hintStyle: TextStyle(color: kcMediumGreyColor),
labelStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.person,
color: Colors.white,
),
),
controller: registerName,
),
),
SizedBox(
height: 5,
),
Container(
padding: EdgeInsets.all(8.0),
child: TextFormField(
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
errorText: _emptyboxmail ? 'field cannot be empty' : null,
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.withOpacity(0.5)),
borderRadius: BorderRadius.circular(20),
),
hintText: 'E-mail',
hintStyle: TextStyle(color: kcMediumGreyColor),
labelStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.email,
color: Colors.white,
),
),
controller: registerEmail,
),
),
SizedBox(
height: 5,
),
Container(
padding: EdgeInsets.all(8.0),
child: TextFormField(
style: TextStyle(color: Colors.white),
obscureText: true,
decoration: InputDecoration(
errorText: _emptyboxpass ? 'field cannot be empty' : null,
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.withOpacity(0.5)),
borderRadius: BorderRadius.circular(20),
),
hintText: 'Password',
hintStyle: TextStyle(color: kcMediumGreyColor),
labelStyle: TextStyle(
color: Colors.white,
),
prefixIcon: const Icon(
Icons.lock,
color: Colors.white,
),
),
controller: registerPassword,
),
),
SizedBox(
height: 5,
),
//VERIFY PASSWORD TEXT BOX
Container(
padding: EdgeInsets.all(8.0),
child: TextFormField(
style: TextStyle(color: Colors.white),
obscureText: true,
decoration: InputDecoration(
errorText:
_emptyboxverify ? 'field cannot be empty' : null,
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.withOpacity(0.5)),
borderRadius: BorderRadius.circular(20),
),
hintText: 'Verify Password',
hintStyle: TextStyle(color: kcMediumGreyColor),
labelStyle: TextStyle(color: Colors.white),
prefixIcon: const Icon(
Icons.lock,
color: Colors.white,
),
),
//TEXT EDITING CONTROLLER
controller: verifyPassword,
),
),
SizedBox(
height: 20,
),
SizedBox(
height: 60,
child: TextButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
),
// THE BUTTON THAT CHECKS IF THE BOOLEANS ARE TRUE OR FALSE FOR THE TEXT BEING EMPTY
onPressed: () {
registerEmail.text.isEmpty
? _emptyboxmail = true
: _emptyboxmail = false;
registerName.text.isEmpty
? _emptyboxregistername = true
: _emptyboxregistername = false;
registerPassword.text.isEmpty
? _emptyboxpass = true
: _emptyboxpass = false;
verifyPassword.text.isEmpty
? _emptyboxverify = true
: _emptyboxverify = false;
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => UserDetailsPreference(),
),
);
},
child: Text('Sign Up'),
),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(8.0),
child: Text(
"━━━━━ OR SIGN UP WITH ━━━━━",
style: TextStyle(color: kcMediumGreyColor),
),
),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.asset('lib/assets/images/googleIcon.png',
width: 50.0, height: 50.0),
),
),
),
SizedBox(
width: 30,
),
InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(),
child: ClipRRect(
// borderRadius: BorderRadius.circular(20.0),
child: Image.asset(
'lib/assets/images/facebookIcon.png',
width: 45.0,
height: 45.0),
),
),
),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(8.0),
child: Text(
"Already have an account?",
style: TextStyle(color: Colors.white),
),
),
Text(
"SIGN IN",
style: TextStyle(color: kcPrimaryColor),
),
],
),
],
),
),
]),
),
);
}
}

Answer 1

You have to move all your initializations and dispose method out of build method.
class _RegisterScreenState extends State<RegisterScreen> {
final registerEmail = TextEditingController();
final registerPassword = TextEditingController();
final verifyPassword = TextEditingController();
final registerName = TextEditingController();
bool _emptyboxmail = false;
bool _emptyboxpass = false;
bool _emptyboxverify = false;
bool _emptyboxregistername = false;
#override
void dispose() {
// Clean up the controller when the widget is disposed.
registerEmail.dispose();
registerPassword.dispose();
verifyPassword.dispose();
registerName.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Colors.transparent,
body: SizedBox(
width: width,
height: height,
// ... rest of your code

Answer 2

Create a Form with a GlobalKey
Add a TextFormField with validation logic
Create a button to validate and submit the form
https://flutter.dev/docs/cookbook/forms/validation