Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Keyboard Pushes TextFields off screen

Tags:

flutter

I've been dealing with a strange situation in Flutter that I just can't figure out.

The problem is that when I attempt to use any kind of TextField in any kind of Scrollable Widget, when I tap the TextField for the keyboard to come up, the keyboard pushes the TextField off of the screen. Everything in the Scaffold is just blank.

I can't exactly say for sure what is happening but sometimes it seems as if the keyboard pushes the content of the scrollable view up past the view but other times it seems that there just seems to be a giant white box attached to the top of the keyboard that covers the context. I've done several experiments but I can't pin the exact behavior down.

To be clear, I've tried using SingleChildScrollView and a ListView. The behavior is the same.

I've read through the whole of this thread and tried the workarounds with no success: https://github.com/flutter/flutter/issues/10826

I've also tried using this workaround: https://gist.github.com/collinjackson/50172e3547e959cba77e2938f2fe5ff5

However, I am just not sure that I am having the exact same issue as those threads.

Here is a code snippet that demonstrates the problem and some screenshots. Am I just doing something blatantly wrong?

class MakeEntryView extends StatefulWidget {

   @override
   State<StatefulWidget> createState() => new MakeEntryState();

}

class MakeEntryState extends State<MakeEntryView> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new SingleChildScrollView(
      child: new Container(
        child: new Column(
          children: <Widget>[
            new TextField(),
            new TextField(),
            new TextField(),
            new TextField(),
            new TextField(),
            new TextField(),
            new TextField(),
          ],
        ),
      ),
    )
  );
}

@override
void initState() {
  super.initState();
}

@override
void dispose() {
  super.dispose();
}

}

Before pressing Text Field

With Text Boxes

After Pressing Text Field

After Pressing Text Field

like image 381
jared-nelsen Avatar asked Aug 06 '18 02:08

jared-nelsen


1 Answers

The Scaffold has a properly to deal with this:

Scaffold(
  resizeToAvoidBottomPadding: false,

There are rare cases where it doesn't work but that should take care of it.

like image 155
scottstoll2017 Avatar answered Oct 02 '22 23:10

scottstoll2017