Keyboard overflows TextField creating yellow/black stripes
heromeister opened this issue · comments
Using the code below I got the error in the page. Anyway to tell the app that it's ok for the keyboard to hide widgets? Thanks.
@override
Widget build(BuildContext context) {
return new Padding (
padding: const EdgeInsets.all(15.0),
child: new Column (
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget> [
new TextField(
controller: widget._NameController,
maxLines: 1,
decoration: new InputDecoration(
labelText: 'Name'
),
),
new TextField(
//controller: widget._TextController,
decoration: new InputDecoration(
labelText: 'Deadline'
),
),
new TextField(
//controller: widget._TextController,
decoration: new InputDecoration(
labelText: 'Amount'
),
),
new TextField(
controller: widget._DescriptionController,
decoration: new InputDecoration(
labelText: 'Description'
),
),
]
),
);
}
You probably want to use a ListView rather than a Column. Consider what happens when the screen is even shorter -- you won't be able to see the text field you're typing into.
Hi, did you fix this issue?
I have it right now.
Could you please share your fix with us, @manigorsh
I followed Hixie advice about switching from Column to ListView. Now I don't get the yellow stripes but I get some white content on top of my content, so basically my content disappeared.
The fix for this is to set the Scaffold property:
resizeToAvoidBottomPadding: false,
Hope this helps.
Not sure why you got white content, that's weird. Maybe file a bug for that? :-)
Had the same issue with the white content overlaying my content setting the Scaffold property to:
resizeToAvoidBottomPadding: false, does work
Yeah got the same problem when u click on the text field keyboard shows up with the white content overflowing the whole scaffold area. With resizeToAvoidBottomPadding it indeed works but I think with this option disabled the keyboard doesn't respect the focused text field and does not scroll the content to appropriate focused box
@stychu please create a new issue with full information.
You need to have a scrollable view. Reason is softkeybord covers bottom pixels of the application.
You can use ListView instead of column or you wrap Column with a SingleChildScrollView widget. It just take one child.
Had the same issue with the white content overlaying my content setting the Scaffold property to:
resizeToAvoidBottomPadding: false, does work
this actually work for me
I face issue of keyboard overlapping my Textfield. When I am going to click on Textfield, my keyboard is getting open and overlapping my Textfield.
Any help and suggestions are Welcome!!
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
fit: StackFit.expand,
children: <Widget>[
new Container(
alignment:FractionalOffset.center,
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Center(
child: new Image(
image: new AssetImage("images/logo.png"),
width: 150.0,
height: 150.0,
colorBlendMode: BlendMode.darken,
),
),
new Padding(padding: const EdgeInsets.only(top: 10.0)),
new Container(
padding: const EdgeInsets.only(left: 15.0, right: 15.0),
decoration: new BoxDecoration(
border: new Border.all(color: colorLightGray),
borderRadius: new BorderRadius.circular(5.0),
color: colorGray),
child: new TextField(
decoration: new InputDecoration(
hintText: enterUserName,
hintStyle: Theme
.of(context)
.textTheme
.caption
.copyWith(color: colorBlack),
fillColor: Colors.black,
border: InputBorder.none),
keyboardType: TextInputType.text,
obscureText: false,
controller: uNameController,
),
),
new Padding(padding: const EdgeInsets.only(top: 10.0)),
new Container(
padding: const EdgeInsets.only(left: 15.0, right: 15.0),
decoration: new BoxDecoration(
border: new Border.all(color: colorLightGray),
color: colorGray,
borderRadius: new BorderRadius.circular(5.0),
),
child: new TextField(
decoration: new InputDecoration(
hintText: email,
hintStyle: Theme
.of(context)
.textTheme
.caption
.copyWith(color: colorBlack),
fillColor: Colors.black,
border: InputBorder.none),
keyboardType: TextInputType.emailAddress,
obscureText: false,
controller: emailController,
),
),
new Padding(padding: const EdgeInsets.only(top: 10.0)),
new Container(
padding: const EdgeInsets.only(left: 15.0, right: 15.0),
decoration: new BoxDecoration(
border: new Border.all(color: colorLightGray),
borderRadius: new BorderRadius.circular(5.0),
color: colorGray),
child: new TextField(
decoration: new InputDecoration(
hintText: password,
hintStyle: Theme
.of(context)
.textTheme
.caption
.copyWith(color: colorBlack),
fillColor: Colors.black,
border: InputBorder.none),
keyboardType: TextInputType.text,
obscureText: true,
controller: pwController,
),
),
new Padding(padding: const EdgeInsets.only(top: 10.0)),
new Container(
padding: const EdgeInsets.only(left: 15.0, right: 15.0),
decoration: new BoxDecoration(
border: new Border.all(color: colorLightGray),
borderRadius: new BorderRadius.circular(5.0),
color: colorGray),
child: new TextField(
decoration: new InputDecoration(
hintText: confirmText,
hintStyle: Theme
.of(context)
.textTheme
.caption
.copyWith(color: colorBlack),
fillColor: Colors.black,
border: InputBorder.none),
keyboardType: TextInputType.text,
obscureText: true,
controller: cPwController,
),
),
new Padding(padding: const EdgeInsets.only(top: 25.0)),
new Row(
children: <Widget>[
new Expanded(
flex: 1,
child: new Container(
padding: const EdgeInsets.only(
right: 8.0, left: 18.0, top: 15.0, bottom: 15.0),
decoration: new BoxDecoration(
color: colorBlue,
borderRadius: new BorderRadius.circular(5.0),
border: new Border.all(
color: colorBlue,
),
),
child: InkWell(
onTap: () {
validation();
},
child: new TextViewWidget(
signUp, true, colorWhite, rowText)),
),
),
],
),
new Padding(
padding: const EdgeInsets.only(bottom: 40.0, top: 15.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextViewWidget(youHaveAcc, false, colorLightGray, buttonText),
new Padding(padding: const EdgeInsets.only(right: 2.0)),
TextViewWidget(logInNow, false, colorBlue, buttonText),
],
),
),
],
),
)
],
),
);
}
resizeToAvoidBottomPadding: false,
@YvesBoah this worked for me - I had an element that I needed to be pinned to the bottom of the screen but the keyboard was causing an overflow. resizeToAvoidBottomPadding is deprecated, but resizeToAvoidBottomInset is the replacement. Thanks!
Okay Thanks you 😊
Thanks work for me @resizeToAvoidBottomPadding: false,
resizeToAvoidBottomPadding is depracated in the beta channel.
Same and flawless results with just resizeToAvoidBottomInset: false
Wrap your Padding in a SingleChildScrollView.
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBarDefault('Profile'), body: SingleChildScrollView( child: Container( padding: EdgeInsets.all(20.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ ]...
To this method work you have to remove the resizeToAvoidBottomInset: false.
@override Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[...
I solved my problem doing like this when I want my form to be centered.
@devgupta2607 Thanks for the Center tip in your code. My column by default aligned to the top when using SingleChildScrollView. Wrapping it all in Center did the trick
@luishar0 thanks man for the resizeToAvoidBottomPadding: false. This worked for me.
@YvesBoah this worked for me - I had an element that I needed to be pinned to the bottom of the screen but the keyboard was causing an overflow. resizeToAvoidBottomPadding is deprecated, but resizeToAvoidBottomInset is the replacement. Thanks!
SOOOOOOO BASICALLY this is completely wrong.
Hi. Just add this parameter inside of your scaffold.
resizeToAvoidBottomPadding: false,
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.