Flutter - TextFormField resets page whenever keyboard pops up - flutter

Question

I am trying to build a login page through firebase with the flutter framework but I have run into the problem of my screen resetting anytime I attempt to use the TextFormField, it'll load the keyboard, and then immediately kick me out and reset the page. I have looked on other threads but can't seem to find any fixes. Thanks for all the help in advance!
class SignInTwo extends StatefulWidget {
final Function toggleView;
SignInTwo({this.toggleView});
#override
_SignInState createState() => _SignInState();
}
class _SignInState extends State<SignInTwo> {
final AuthService _auth = AuthService();
final _formKey = GlobalKey<FormState>();
bool loading = false;
// text fields state
String email = "";
String password = "";
String error = "";
#override
Widget build(BuildContext context) {
return loading ? Loading() : Scaffold(
backgroundColor: Colors.brown[100],
appBar: AppBar(
backgroundColor: Colors.brown[400],
elevation: 0.0,
title: Text('Sign in'),
actions: <Widget>[
FlatButton.icon(
label: Text("Register"),
icon: Icon(Icons.person),
onPressed: () {
widget.toggleView();
},
)
],
),
body: Container(
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 50.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
TextFormField(
decoration: textDecoration.copyWith(hintText: 'Email'),
validator: (value) {
if (value.isEmpty) {
return 'Please enter email';
}
return null;
},
onChanged: (value) {
setState(() => email = value);
},
),
SizedBox(
height: 20.0,
),
TextFormField(
decoration: textDecoration.copyWith(hintText: 'Password'),
validator: (val) {
if (val.length < 6) {
return 'Enter password with more than 6+ characters';
}
return null;
},
onChanged: (value) {
setState(() => password = value);
},
obscureText: true,
),
SizedBox(
height: 20.0,
),
RaisedButton(
color: Colors.pink[400],
child: Text(
"Sign In",
style: TextStyle(color: Colors.white),
),
onPressed: () async {
if (_formKey.currentState.validate()) {
setState(() {
loading = true;
});
dynamic result = await _auth.signInWithEmailAndPassword(
email, password);
if (result == null) {
setState(() {
error = "Something went wrong!!";
loading = false;
});
}
}
},
),
SizedBox(
height: 20,
),
Text(
error,
style: TextStyle(color: Colors.red),
)
],
),
)),
);
}
}
I am not sure if it is a problem with my main class or any of the others but I will leave them below just incase it might be the cause of the problem.
class MyApp extends StatefulWidget {
final SharedPreferences storage;
const MyApp({Key key, this.storage}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
fontFamily: "Audiowide",
primarySwatch: Colors.yellow,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Wrapper(),
);
}
}
This wrapper just decides if the user is already logged in or not. In my case it is not so it will return the Authenticate class.
class Wrapper extends StatelessWidget {
#override
Widget build(BuildContext context) {
final player = Provider.of<Player>(context);
if(player == null){
return Authenticate();
}else{
return Home();
}
}
}
class Authenticate extends StatefulWidget {
#override
_AuthenticateState createState() => _AuthenticateState();
}
class _AuthenticateState extends State<Authenticate> {
bool showSignIn = true;
void toggleView() {
setState(() {
showSignIn = !showSignIn;
});
}
#override
Widget build(BuildContext context) {
if(showSignIn){
return SignInTwo(toggleView: toggleView);
}else{
return Register(toggleView: toggleView);
}
}
}

Answer 1

Every time you open keyboard the build function is called and check if its loading and create new Scaffold instance this the reason of your problem
you can fix it by adding key to Scaffold
something like this
Scaffold(key:scaffoldKey
...)