Scroll TextFormField above keyboard in ListView

Question

I have the following drawer in my app:

When I press on the password TextFormField I get the following:

As you can see, the password TextFormField is covered. I tried to solve this, as suggested here:

class _LoginDrawer extends State<LoginDrawer> {
  static var _listViewScrollController = new ScrollController();

  @override
  Widget build(BuildContext context) => new Drawer(
    child: new ListView(
      controller: _listViewScrollController,
      children: <Widget>[
        // ...
        new Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: new GestureDetector(
            onTap: () {
              SchedulerBinding.instance.addPostFrameCallback((_) {
                _listViewScrollController.jumpTo(
                 _listViewScrollController.position.maxScrollExtent);
              });
            },
            child: new TextFormField(
                obscureText: true,
                decoration: new InputDecoration(labelText: "Password")),
          ),
        ),
      ],
    ),
  );
}

But this doesn't solve it, the app just behaves the same as before. Also some people suggested to use a ListView that is reversed and then use listViewController.jumpTo(0.0) but this led to the unwanted effect, that all widgets started from the bottom:

It is an issue with flutter, check if this relevant to your case https://stackoverflow.com/questions/46841637/show-a-text-field-dialog-without-being-covered-by-keyboard/46849239#46849239 — Shady Aziza, Jan 02 '18 at 22:03
Na bruh, this was like a million years ago, I don't even work on this app anymore, skrrr. — , Dec 08 '20 at 11:32

score 4 · Answer 1 · answered Oct 29 '20 at 10:29

4

Wrap your listview with Scaffold and set resizeToAvoidBottomInset: true, this property. May be this can help you.

answered Oct 29 '20 at 10:29

nauman mir

79
4

score 2 · Answer 2 · answered Jan 03 '18 at 00:36

2

According to the issue @aziza posted, it goes to this github issue:

https://github.com/flutter/flutter/issues/7032

And the solution is to use a widget that moves the elements up out of the way of the keyboard. This is a bug in flutter.

answered Jan 03 '18 at 00:36

marktechson

409
1
3
10

score 0 · Answer 3 · answered Jul 03 '18 at 09:14

Since you have few TextFields and you have used ListView, you can reverse the ListView and finally add .reversed.toList() like below:

new ListView(
  reverse: true, //this line reverse the list
  controller: _listViewScrollController,
  children: <Widget>[
    // ...
    new Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: new GestureDetector(
        onTap: () {
          SchedulerBinding.instance.addPostFrameCallback((_) {
            _listViewScrollController.jumpTo(
              _listViewScrollController.position.maxScrollExtent);
          });
        },
        child: new TextFormField(
            obscureText: true,
            decoration: new InputDecoration(labelText: "Password")),
      ),
    ),
  ].reversed.toList(), // reverse it backword(Iterable) and convert it to ListView
),

According to @collinJackson, this will fail, if you have more textfields.

Read more here: https://github.com/flutter/flutter/issues/10826

Scroll TextFormField above keyboard in ListView

3 Answers3