TextFormField not appearing in Simulator - flutter

Question

I've been trying to make the TextFormField ('email:') appear in my Simulator, but it's not appearing in my Simulator as following:
However when I make changes to any other things, it does change, so the Simulator is not a problem.
This is my login_page.dart file:
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget{
#override
State createState() => new LoginPageState();
}
class LoginPageState extends State<LoginPage>{
#override
Widget build(BuildContext context){
return new Scaffold(
appBar: AppBar(
title: new Text("SMART ID", textAlign: TextAlign.center, style: TextStyle(fontFamily: 'Open Sans', fontWeight: FontWeight.bold)),
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset(
"assets/arrowPNG.png",
scale: 8.0,
)
)
),
backgroundColor: Colors.transparent,
body: Stack(
children: <Widget>[
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.png'),
fit: BoxFit.cover,
),
),
),
Positioned(
width: MediaQuery.of(context).size.width,
top: MediaQuery.of(context).size.width * 0.30,
child: Container(
margin: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/arrowPNG.png', scale: 2.5),
SizedBox(height: 20,),
Text("SMARTID", style: TextStyle(
fontSize: 30, color: Colors.black, fontFamily: 'Open Sans', fontWeight: FontWeight.bold,
),
),
Text("Attendance & Wallet Monitoring", style: TextStyle(
fontSize: 16, color: Colors.black, fontFamily: 'Open Sans', fontWeight: FontWeight.normal,
)
)
],
),
),
),
Positioned(
width: MediaQuery.of(context).size.width,
top: MediaQuery.of(context).size.width * 0.85,
child: Container(
margin: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Version 1.0", style: TextStyle(
fontSize: 16, color: Colors.black, fontFamily: 'Open Sans', fontWeight: FontWeight.normal,
)
)
],
)
)
)
],
),
);
}
}
class LoginForm extends StatefulWidget{
#override
LoginFormState createState(){
return LoginFormState();
}
}
class LoginFormState extends State<LoginForm>{
final formKey = GlobalKey<FormState>();
String _username, _password;
#override
Widget build(BuildContext context){
body: Card(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Form(
key: formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Username:'
),
validator: (input) => !input.contains('0') ? 'Username cannot be blank' : null,
onSaved: (input) => _username = input,
),
],
),
),
),
);
}
}
How do I resolve this? Thanks in advance!

Answer 1

You are right, Simulator is not a problem. The problem is in your code. You have correctly created the LoginPage. To correct the LoginForm widget, in your LoingFormState's build function replace:
body: Card(
// your usual code that you have above
)
with
return Card(
// your usual code that you have above
)
Also you have not used the LoginForm Widget in the LoginPage, and that is the reason the form is not visible. Simply, creating a widget doesn't include the widget on any screen, you have to use the widget.
You can do that by adding the widget inside the body section of LoginPageState's build function. To use the widget type
body: Stack(
children: <Widget>[
// your other widgets
LoginForm(),
]
)
like you do for any other widget.
This should solve your problem