CODEWITHSUNDEEP
flutter
anon
anon

Reputation:

Scroll TextFormField above keyboard in ListView

I have the following drawer in my app:

enter image description here

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

enter image description here

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:

enter image description here

Upvotes: 10

Views: 10349

Answers (3)

nauman mir
nauman mir

Reputation: 154

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

Upvotes: 5

Blasanka
Blasanka

Reputation: 22437

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

Upvotes: 1

marktechson
marktechson

Reputation: 409

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.

Upvotes: 2

Related Questions