How to make StatefulWidget with global key in Flutter? - flutter

Question

I'm new to Flutter, and I think I might just have things set up weird. Most of what's setup so far is from small tutorials. I currently have my main.dart rendering just a userCheck Widget, which will eventually be used to connect with backend and check whether or not I have a valid user token.
class UserCheck extends StatefulWidget {
const UserCheck({Key key}) : super(key: key);
#override
UserCheckState createState() => UserCheckState();
}
class UserCheckState extends State<UserCheck> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
var userExists = false;
#override
Widget build(BuildContext context) {
return userExists
? Home()
: new LoginForm();
}
}
The Home Widget would eventually load information from the backend, given there's a proper user. Right now, userExists obviously defaults to false. This loads the LoginForm just fine. My current goal is when a user logs in, to assume that it's a good login, then reversing userExists to be true, thus opening the Home page. This is the LoginForm setup:
LoginForm({Key key}) : super(key: key);
UserCheckState parent;
#override
LoginFormState createState() => LoginFormState();
}
class LoginFormState extends State<LoginForm> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
var userData = {};
bool login = true;
String loginText = 'Sign Up';
void updateField(String value, String field) {
setState(() {
userData = {
...userData,
'$field': value,
};
});
}
void sendHome() {
setState(() {
// this.parent.parent.userExists = true;
});
}
#override
Widget build(BuildContext context) {
return Container(
child: Column(children: <Widget>[
login
? Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
decoration: const InputDecoration(
hintText: 'Enter a username', labelText: 'Username'),
validator: (String value) {
if (value == null || value.isEmpty) {
return 'Please enter a username';
}
updateField(value, 'username');
return null;
},
),
TextFormField(
obscureText: true,
enableSuggestions: false,
autocorrect: false,
decoration: const InputDecoration(
hintText: 'Enter your password',
labelText: 'Password'),
validator: (String value) {
if (value == null || value.isEmpty) {
return 'Please enter a password';
}
updateField(value, 'password');
return null;
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
print('hit here');
if (_formKey.currentState.validate()) {
print('hit here two');
sendHome();
print(userData);
// if API responds with proper token
// API call to login
}
},
child: Text('Submit'),
),
),
],
),
)
: SignupForm(),
ElevatedButton(
onPressed: () {
setState(() {
login = !login;
loginText = loginText == 'Sign Up' ? 'Log In' : 'Sign Up';
});
},
child: Text(loginText),
)
]),
);
}
}```
I don't know if there's some sort of router that would be better and is already implemented as switching Widgets, but I haven't found anything from my own searches.

Answer 1

You don't have to get back to the userCheck widget if the user logs in. Instead, you can go to the Home screen directly by using Navigator to make a transition from the Login page to the Home page. Put the navigator right after the line the user gets a valid token inside the onPressed function of your Submit button:
ElevatedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
// Goes to Home screen.
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => Home(),
));
}
},
child: Text('Submit'),
),