#flutter #dart #stack #textfield
#flutter #dart #стек #текстовое поле
Вопрос:
Я пытаюсь создать пользовательский интерфейс для страницы регистрации с небольшим перекрытием между контейнером, который содержит поля TextFormFields, и синим контейнером, который предназначен только для украшения. Но, когда я делаю это, используя виджет стека и Positioned для установки положения белого контейнера, мои текстовые поля не работают (они не открывают клавиатуру при нажатии). Плоская кнопка, которую я использовал, также не работает. Интересно, что я делаю не так…
введите описание изображения здесь
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,)
],
),
),
),
),
),
],
)
);
}
}
Ответ №1:
Здесь я прокомментировал ваш виджет SizedBox и завернул синий контейнер, который предназначен только для украшения с позиционированным виджетом, также дающим соответствующую ширину и высоту.
Теперь оно полностью работает /!!
Вы можете скопировать и вставить, запустив полный код ниже:-
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,
)
],
),
),
),
),
),
],
));
}
}