Flutter's TextFormField doesn't work inside a Positioned widget - flutter

Question

I'm trying to create an UI for a signup page with a little overlap between the container that contains the TextFormFields and the blue container that is only for decoration. But, when I do so, using a Stack widget and a Positioned to set the position of the white Container, my TextFormFields don't work (they don't open the keyboard when I click). The FlatButton I used also isn't working. I wonder what I'm doing wrong...
enter image description here
class TelaCadastro extends StatefulWidget {
#override
_TelaCadastroState createState() => _TelaCadastroState();
}
final GlobalKey<FormState> _cadastroKey = GlobalKey<FormState>();
final FirebaseAuth _auth = FirebaseAuth.instance;
final TextEditingController _nomeController = TextEditingController();
final TextEditingController _emailController = TextEditingController();
final TextEditingController _senhaController = TextEditingController();
final TextEditingController _confirmarSenhaController = TextEditingController();
class _TelaCadastroState extends State<TelaCadastro> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0,
title: Text('Cadastrar'),
),
body: Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 17),
color: Colors.indigo,
height: 150,
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: MediaQuery.of(context).size.width - 50,
child: Text('A Corretora trabalha com as melhores '
'seguradoras do mercado',
style: TextStyle(fontSize: 21, color: Colors.white),),
),
),
),
SizedBox(height: 15,),
Positioned(
width: MediaQuery.of(context).size.width - 30,
left: 15,
top: 135,
child: Container(
height: 460,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Form(
key: _cadastroKey,
child: Padding(
padding: EdgeInsets.only(left: 15, right: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.person_add, color: Colors.indigo,),
Text(' Cadastre-se abaixo!',
style: TextStyle(fontSize: 16, color: Colors.indigo),),
],
),
SizedBox(height: 15),
TextFormField(
controller: _nomeController,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
) ,
prefixIcon: Icon(Icons.person),
hintText: 'Nome Completo',
filled: true,
fillColor: Colors.grey[200]
),
),
SizedBox(height: 20,),
TextFormField(
controller: _emailController,
validator: (String texto){
if (texto.isEmpty || !texto.contains('#')){
return 'Por favor, informe um email válido';
}
return null;
},
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
) ,
prefixIcon: Icon(Icons.email),
hintText: 'Email',
filled: true,
fillColor: Colors.grey[200]
),
),
SizedBox(height: 20,),
TextFormField(
controller: _senhaController,
validator: (String texto){
if (texto.isEmpty || texto.length < 6){
return 'Por favor, informe uma senha válida';
}
return null;
},
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
) ,
prefixIcon: Icon(Icons.lock),
hintText: 'Senha',
filled: true,
fillColor: Colors.grey[200]
),
obscureText: true,
),
SizedBox(height: 20,),
TextFormField(
controller: _confirmarSenhaController,
validator: (String texto){
if (texto.isEmpty || texto.length < 6){
return 'Por favor, informe uma senha válida';
}
return null;
},
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
) ,
prefixIcon: Icon(Icons.lock),
hintText: 'Confirme sua Senha',
filled: true,
fillColor: Colors.grey[200]
),
obscureText: true,
),
SizedBox(height: 30,),
Builder(
builder: (context) => Container(
width: MediaQuery.of(context).size.width - 30,
height: 50,
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: FlatButton(
child: Text('Criar Conta', style: TextStyle(color: Colors.white),),
onPressed: (){
print('test');
},
),
),
),
SizedBox(height: 15,)
],
),
),
),
),
),
],
)
);
}
}

Answer 1

Here I had Commented your SizedBox widget and wrapped blue Container which is only for decoration with Positioned widget also giving appropriate width and height.
Now its completely working/!!
You can copy and paste run the full code below:-
class TelaCadastro extends StatefulWidget {
#override
_TelaCadastroState createState() => _TelaCadastroState();
}
final GlobalKey<FormState> _cadastroKey = GlobalKey<FormState>();
//final FirebaseAuth _auth = FirebaseAuth.instance;
final TextEditingController _nomeController = TextEditingController();
final TextEditingController _emailController = TextEditingController();
final TextEditingController _senhaController = TextEditingController();
final TextEditingController _confirmarSenhaController = TextEditingController();
class _TelaCadastroState extends State<TelaCadastro> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0,
title: Text('Cadastrar'),
),
body: Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
width: 414,
height: 150,
child: Container(
padding: EdgeInsets.only(left: 17),
color: Colors.indigo,
height: 150,
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: MediaQuery.of(context).size.width - 50,
child: Text(
'A Corretora trabalha com as melhores '
'seguradoras do mercado',
style: TextStyle(fontSize: 21, color: Colors.white),
),
),
),
),
),
// SizedBox(
// height: 15,
// ),
Positioned(
width: MediaQuery.of(context).size.width - 30,
left: 15,
top: 135,
child: Container(
height: 460,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Form(
key: _cadastroKey,
child: Padding(
padding: EdgeInsets.only(left: 15, right: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.person_add,
color: Colors.indigo,
),
Text(
' Cadastre-se abaixo!',
style:
TextStyle(fontSize: 16, color: Colors.indigo),
),
],
),
SizedBox(height: 15),
TextFormField(
controller: _nomeController,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
prefixIcon: Icon(Icons.person),
hintText: 'Nome Completo',
filled: true,
fillColor: Colors.grey[200]),
),
SizedBox(
height: 20,
),
TextFormField(
controller: _emailController,
validator: (String texto) {
if (texto.isEmpty || !texto.contains('#')) {
return 'Por favor, informe um email válido';
}
return null;
},
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
prefixIcon: Icon(Icons.email),
hintText: 'Email',
filled: true,
fillColor: Colors.grey[200]),
),
SizedBox(
height: 20,
),
TextFormField(
controller: _senhaController,
validator: (String texto) {
if (texto.isEmpty || texto.length < 6) {
return 'Por favor, informe uma senha válida';
}
return null;
},
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
prefixIcon: Icon(Icons.lock),
hintText: 'Senha',
filled: true,
fillColor: Colors.grey[200]),
obscureText: true,
),
SizedBox(
height: 20,
),
TextFormField(
controller: _confirmarSenhaController,
validator: (String texto) {
if (texto.isEmpty || texto.length < 6) {
return 'Por favor, informe uma senha válida';
}
return null;
},
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
prefixIcon: Icon(Icons.lock),
hintText: 'Confirme sua Senha',
filled: true,
fillColor: Colors.grey[200]),
obscureText: true,
),
SizedBox(
height: 30,
),
Builder(
builder: (context) => Container(
width: MediaQuery.of(context).size.width - 30,
height: 50,
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: FlatButton(
child: Text(
'Criar Conta',
style: TextStyle(color: Colors.white),
),
onPressed: () {
print('test');
},
),
),
),
SizedBox(
height: 15,
)
],
),
),
),
),
),
],
));
}
}