Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scroll TextFormField above keyboard in ListView

Tags:

flutter

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

like image 385
janosch Avatar asked Jan 02 '18 21:01

janosch


People also ask

Is there a way to scroll the contents of a listview?

There's a workaround that should get around this: This is inspired by how the Flutter UI codelab works (we want to use the bottom of the ListView as the scroll anchor instead of the top, so that the software keyboard will shift the list contents upwards).

How to shift the focus between multiple textformfields inside a form?

In Flutter, the user can shift the focus between multiple TextFormFields inside a Form by using the soft keyboard (not by tapping the TextFormFields). This article shows you 2 ways to do so.

Could you check if a textfield is scrollable?

Could you check if you are in a "Scrollable"? This is the condition 'sine qua non', as the trick makes sure the "scrollable" positions itself (= scrolls) so that the TextField is made visible. Awesome article! Bro! I have two TextField which are email and password, but I wanna implement to lift up not only textfield but also button.

How to set the value of scrollpadding in textfield?

TextField has a property calling scrollPadding . scrollPadding: EdgeInsets.only (bottom:40), By default it is set to EdgeInsets.all (20.0) You can give a fixed value or use viewInsets. Hope this will help you too. Please find more information on this here. Show activity on this post. I actually had the same problem.


2 Answers

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

like image 147
nauman mir Avatar answered Oct 06 '22 03:10

nauman mir


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.

like image 44
marktechson Avatar answered Oct 06 '22 03:10

marktechson