Keyboard is not working properly with TextField
.
The code below I put 14 TextField
, but when clicking for example in field 14 the keyboard does not appear and it is not below the TextField
tapped.
Could you help me with this keyboard problem not showing up and not getting me under the chosen field to be?
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new HomePage()));
}
class HomePage extends StatefulWidget {
@override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
final TextEditingController _controller = new TextEditingController();
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: <Widget>[
new ListView(
shrinkWrap: true,
children: <Widget>[
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 1',
),
),
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 2',
),
),
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 3',
),
),
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 4',
),
),
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 5',
),
),
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 6',
),
),
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 7',
),
),
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 8',
),
),
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 9',
),
),
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 10',
),
),
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 11',
),
),
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 12',
),
),
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 13',
),
),
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something 14',
),
),
],
)
]
)
);
}
}
TextField is a very common widget in Flutter. When you click on the TextField it opens up the on-screen keyboard. To hide/dismiss the keyboard you have to press the back button in Android and the done button (inside the onscreen keyboard) in iOS.
The reason of this so called Glitch is that the default behaviour of the flutter scaffold widget is to resize it's body when soft keyboard opens up or closes down. While the flutter scaffold is notified of any of the above two events, it will start resizing the widgets under its body to match the new state.
I had the same problem, but in my case it was in Key object
await showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
final _textKey = GlobalKey<FormState>();
TextEditingController controller = TextEditingController();
return AlertDialog(
title: Text('Load conference'),
content: Form(
key: _textKey,
child: TextFormField(
controller: controller,
validator: (str) {
if (str.isEmpty) {
return 'Empty url';
} else if (str.length >= 4 && str.substring(0, 4).toLowerCase() != 'http') {
return 'Url has to start from \'http\'';
}
},
),
onChanged: () {
if (controller.text.isNotEmpty) {
_textKey.currentState.validate();
}
},
),
Problem was solved by making key static class field
static final _textKey = GlobalKey<FormState>();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With