Understanding flutter design elements material colours in text fields - flutter

Question

I am new to flutter so please bare with me and my ulgly code here. I am trying to create a login screen and so far I have the following.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
foregroundColor: Colors.white,
title: Text('Login Page '),
),
body: Padding(
padding: EdgeInsets.all(10),
child: ListView(
children: <Widget>[
Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10),
child: Text(
'The Hockey Lab',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.w500,
fontSize: 30),
)),
Container(
padding: EdgeInsets.all(10),
child: TextField(
controller: nameController,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 0.0),
),
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white)),
labelText: 'User Name',
),
),
),
Container(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
child: TextField(
style: TextStyle(color: Colors.white),
obscureText: true,
controller: passwordController,
decoration: InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white)),
labelText: 'Password',
),
),
),
FlatButton(
onPressed: () {
//forgot password screen
},
textColor: Colors.blue,
child: Text('Forgot Password'),
),
Container(
height: 50,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('Login'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AdminMenuPage()),
);
print(passwordController.text);
},
)),
Container(
child: Row(
children: <Widget>[
Text('Does not have account?'),
FlatButton(
textColor: Colors.blue,
child: Text(
'Sign in',
style: TextStyle(fontSize: 20),
),
onPressed: () {
//signup screen
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
))
],
)));
}
}
Which is producing me this Gui however I have an issue When I first load the app I get this
But I want the both textboxes to be white all the time with the frames but when I take my mouse away it disappears I presume its another colour I need like a not focussed colour, also you will notice the username bit has disapeared from the text field widget?.
Also does flutter have such a thing as place holder text color?
I am evuluating flutter for front end stuff at min as Maui is pushed back another six months and I just want to see how long takes me to do the same app in flutter.

Answer 1

you need just to set the color of the container that contain the textField like this :
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
foregroundColor: Colors.white,
title: Text('Login Page '),
),
body: Padding(
padding: EdgeInsets.all(10),
child: ListView(
children: <Widget>[
Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10),
child: Text(
'The Hockey Lab',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.w500,
fontSize: 30),
)),
Container(
color: Colors.White, // here set the color you want
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey,
),
padding: EdgeInsets.all(10),
child: TextField(
controller: nameController,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 0.0),
),
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white)),
labelText: 'User Name',
),
),
),
Container(
color: Colors.White, // here set the color you want
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey,
),
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
child: TextField(
style: TextStyle(color: Colors.white),
obscureText: true,
controller: passwordController,
decoration: InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white)),
labelText: 'Password',
),
),
),
FlatButton(
onPressed: () {
//forgot password screen
},
textColor: Colors.blue,
child: Text('Forgot Password'),
),
Container(
height: 50,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('Login'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AdminMenuPage()),
);
print(passwordController.text);
},
)),
Container(
child: Row(
children: <Widget>[
Text('Does not have account?'),
FlatButton(
textColor: Colors.blue,
child: Text(
'Sign in',
style: TextStyle(fontSize: 20),
),
onPressed: () {
//signup screen
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
))
],
)));
}
}