Flutter, textfield value is getting empty when virtual keyboard is hidden - flutter

Question

I am trying to create a login and register page for my app, I'm using the stateful widget on both screens.
after filling up the registration or login form and hiding the keyboard to press the register or login button, I'm getting the "string is empty" result, also on onPressed, I've tried to print my email and password in the console but I'm getting an empty field. But, if I try the same with my virtual keyboard still open on my virtual device, I'm able to print out the string, as far as I can understand the error is happening only when the keyboard is hidden.
this is my input field class
class RoundedInputField extends StatefulWidget {
final String hintText;
final ValueChanged<String> onChanged;
final Color color;
final bool boolean;
RoundedInputField({
Key key,
this.hintText,
this.onChanged,
this.color,
this.boolean = false,
}) : super(key: key);
#override
_RoundedInputFieldState createState() => _RoundedInputFieldState();
}
class _RoundedInputFieldState extends State<RoundedInputField> {
#override
Widget build(BuildContext context) {
return TextFieldContainer(
child: TextFormField(
onChanged: widget.onChanged,
obscureText: widget.boolean,
decoration: InputDecoration(
hintText: widget.hintText,
border: InputBorder.none,
),
),
);
}
}
class TextFieldContainer extends StatefulWidget {
final Widget child;
final Color color;
const TextFieldContainer({
Key key,
this.child,
this.color: Colors.white,
}) : super(key: key);
#override
_TextFieldContainerState createState() => _TextFieldContainerState();
}
class _TextFieldContainerState extends State<TextFieldContainer> {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
width: size.width * 0.8,
decoration: BoxDecoration(
color: widget.color,
borderRadius: BorderRadius.circular(29),
),
child: widget.child,
);
}
}
and I call RoundedInputField
RoundedInputField(
hintText: "Email",
onChanged: (val) {
email = val;
},
this is my button for registering, currently im only printing the values
Container(
margin: EdgeInsets.symmetric(vertical: 10),
width: size.width * 0.8,
child: ClipRRect(
borderRadius: BorderRadius.circular(29),
child: FlatButton(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
color: Colors.white,
onPressed: () async {
print(email);
print(password);
},
child: Text(
'login',
style: GoogleFonts.montserrat(
color: HexColor(studentPrimaryColour), fontSize: 20),
),
),
),
),
this is my login screen
class StudentLoginScreen extends StatefulWidget {
StudentLoginScreen();
#override
_StudentLoginScreenState createState() => _StudentLoginScreenState();
}
class _StudentLoginScreenState extends State<StudentLoginScreen> {
#override
Widget build(BuildContext context) {
final AuthService _authService = AuthService();
Size size = MediaQuery.of(context).size;
String email = '';
String password = '';
return Scaffold(
backgroundColor: HexColor(studentPrimaryColour),
body: SafeArea(
child: ListView(
children: <Widget>[
SizedBox(
height: 25.0,
),
HeadingText(
text: 'Login',
size: 60.0,
color: Colors.white,
),
SizedBox(
height: 25.0,
),
RoundedInputField(
hintText: "Email",
onChanged: (val) {
email = val;
},
),
SizedBox(
height: 5.0,
),
RoundedInputField(
hintText: "Password",
boolean: true,
onChanged: (val) {
password = val;
},
),
SizedBox(
height: 15.0,
),
Container(
margin: EdgeInsets.symmetric(vertical: 10),
width: size.width * 0.8,
child: ClipRRect(
borderRadius: BorderRadius.circular(29),
child: FlatButton(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
color: Colors.white,
onPressed: () async {
print(email);
print(password);
},
child: Text(
'login',
style: GoogleFonts.montserrat(
color: HexColor(studentPrimaryColour), fontSize: 20),
),
),
),
),
SizedBox(
height: 15.0,
),
InkWell(
onTap: () {
Navigator.pushNamed(context, '/studentRegisterScreen');
},
child: HeadingText(
text: 'register?',
color: Colors.white,
size: 10,
),
),
],
),
),
);
}
}

Answer 1

Inside your login screen, you declared and initialised both properties email and password inside the build method. What this essentially means is, that as soon as your login widget gets rebuilded (for example when hiding the keyboard since Flutter has to recalculate size and so on) both properties are initialised again with ''.
Thats what StatefulWidget are also for - defining properties as part of the state, without being part of the build cycle. In other words, change it up to this:
class StudentLoginScreen extends StatefulWidget {
StudentLoginScreen();
#override
_StudentLoginScreenState createState() => _StudentLoginScreenState();
}
class _StudentLoginScreenState extends State<StudentLoginScreen> {
String email = '';
String password = '';
#override
Widget build(BuildContext context) {
...
}