The method 'validate' was called on null - flutter

Question

The Method validate is calling null
How can I fix it?
Here is my code
saveUserInfoToFireStore() async {
final GoogleSignInAccount gCurrentUser = gSignIn.currentUser;
DocumentSnapshot documentSnapshot =
await userRefrence.document(gCurrentUser.id).get();
if (!documentSnapshot.exists) {
final username = await Navigator.push(context,
MaterialPageRoute(builder: (context) => CreateAccountPage()));}
CreateAccountPage.dart
class _CreateAccountPageState extends State<CreateAccountPage> {
final _scaffoldKey = GlobalKey<ScaffoldState>();
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
// final _formKey = GlobalKey<FormState>();
String username;
submitUsername() {
final form = _formKey.currentState;
if (form.validate()) {
form.save();
SnackBar snackBar = SnackBar(
content: Text("Welcome" + username),
);
_scaffoldKey.currentState.showSnackBar(snackBar);
Timer(Duration(seconds: 4), () {
Navigator.pop(context, username);
});
}
}
#override
Widget build(BuildContext parentContext) {
return Scaffold(
key: _scaffoldKey,
appBar:
header(context, strTitle: "Settings", disappearedBackButton: true),
body: ListView(
children: <Widget>[
Container(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 26.0),
child: Center(
child: Text(
"Set up a Username",
style: TextStyle(fontSize: 26.0),
),
),
),
Padding(
padding: EdgeInsets.all(17.0),
child: Container(
child: Form(
key: _formKey,
autovalidate: true,
child: TextFormField(
style: TextStyle(color: Colors.white),
validator: (val) {
if (val.trim().length < 5 || val.isEmpty) {
return "user name is very Short";
} else if (val.trim().length < 10 || val.isEmpty) {
return "user name is very long";
} else {
return null;
}
},
onSaved: (val) => username = val,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
border: OutlineInputBorder(),
labelText: "Username",
labelStyle: TextStyle(fontSize: 16.0),
hintText: "must be atleast 5 charecters",
hintStyle: TextStyle(color: Colors.grey),
),
),
),
),
),
GestureDetector(
onTap: submitUsername(),
child: Container(
height: 55.0,
width: 360.0,
decoration: BoxDecoration(
color: Colors.lightGreen,
borderRadius: BorderRadius.circular(8.0),
),
child: Center(
child: Text(
"Proceed",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
)
],
),
);
}
}

Answer 1

The issue was with your onTap function.
submitUsername inside onPressed is a function reference, which means it is not executed immediately. It is executed after the user clicks on the Button
While,
submitUsername() is a function call and it is executed immediately.
You should use submitUsername and not submitUsername().
GestureDetector(
onTap: submitUsername, //new line
child: Container(
height: 55.0,
width: 360.0,
decoration: BoxDecoration(
color: Colors.lightGreen,
borderRadius: BorderRadius.circular(8.0),
),
child: Center(
child: Text(
"Proceed",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
OR
Call the submitUsername function inside an anonymous function that will act as a callback.
GestureDetector(
onTap: (){
submitUsername();
},
child: Container(
height: 55.0,
width: 360.0,
decoration: BoxDecoration(
color: Colors.lightGreen,
borderRadius: BorderRadius.circular(8.0),
),
child: Center(
child: Text(
"Proceed",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
),
),
),