@Hixie @abarth this sounds familiar, do we already have this tracked/understood somewhere else?

This is basically the same bug as #105, #170, #172, #188.

@Hixie is there anything Posse can do to work around this bug? This specific instantiation is currently considered as a high priority issue.

Not really. Mark it a blocker and I'll fix it in the next week or two. (I'm working on deep linking bugs right now, which I understand are also a high priority.)

There's a workaround that should get around this:

new ListView(
  reverse: true,
  children: <Widget>[
    // put your text fields here
  ].reversed.toList(),
),

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).

Unfortunately, it can introduce a new bug if the scrolling pushes the text fields upwards and they end up getting hidden by the top. If you only have a few text fields and they're at the bottom of your ListView, this might be just fine, but it would still be a problem if you have a lot of text fields.

You can use a SingleChildScrollView with a Column instead of a ListView to prevent the keyboard from dismissing. It won't solve the problem of the text field being hidden by the keyboard, but it would at least allow the user to scroll the field into view and then fill it out.

Thanks @collinjackson . The SingleChildScrollView workaround makes my form useable. The fix would be great so that the text fields aren't hidden requiring the user to scroll the field into view.

OK, good. Sounds like it's no longer blocking.

@Hixie is going to work on preventing fields from being scrolled offscreen by the keyboard as part of his work on #105 next week. Once that is done, we can close this bug and you'll be able to go back to using ListView.

I've begun work on this issue.

• Teach RenderSliverMultiBoxAdaptor to keep children alive.
• Test that RenderSliverMultiBoxAdaptor knows how to keep children alive.
• Test that RenderSliverMultiBoxAdaptor knows how to drop kept-alive children when they go away.
• Teach RenderSliverMultiBoxAdaptor to describe its children now that it has two sets of children.
• Test RenderSliverMultiBoxAdaptor description.
• KeepAlive widget.
• Test KeepAlive widget.
• KeepAliveAutomatically widget.
• Test KeepAliveAutomatically widget.
• Automatically wrap SliverList and SliverGrid children in KeepAliveAutomatically widgets.
• Test that the automatic wrapping works.
• Dispatch events to KeepAliveAutomatically when focused.
• Test that we dispatch events to KeepAliveAutomatically when focused.
• Dispatch events to KeepAliveAutomatically when splashing. (Splashes are lost if you scroll their row off the screen #105)
• Test that we ispatch events to KeepAliveAutomatically when splashing.
• Dispatch events to KeepAliveAutomatically when dismissing. (When an item in a lazy list is being dismissed, we should keep it alive #172)
• Test that we dispatch events to KeepAliveAutomatically when dismissing.
• Provide a way to figure out the actual location of kept-alive children.
• Actually move the focused item into view when the list is occluded.
• Test moving of focused item into view.

I've a patch that does almost all of this. The two remaining bits are actually scrolling the text field into view, and handling text fields that have decorations because the reparenting is causing some sort of bug in my code and prematurely ejecting the row.

Ok, figured out the bug. Now I just need to do the scrolling into view part!

Here is an example for scrolling focused widgets into view. Should only be useful while this issue is still being worked on.

Workaround is in place so I removed the customer blocker label, but they would still like this fixed so we can remove the workaround.

I am too facing this (Tapping into TextFormFields inside SingleChildScrollView causes keyboard to show and immediately hide) problem with the keyboard. It was working fine previously but right now this problem is happing with the same piece of code.

@Rishab-1065 if you're using the workaround I posted above, try increasing the delay on line 57 from 300ms to a larger value. There's a race condition that could probably be removed with some effort but hopefully the framework-level fix will arrive soon.

I have this problem but it's a TextField in an Expanded in a Column with a Row and Divider in an Expanded in a Column.

it looks like

This bug is still around.
Keyboard hiding textfield that has the focus. I have tried all the fixes in this thread and everywhere else nothing seems to work.

The tree hierachy looks like this :
Container -> ListView -> TextField

When the textfiled is at the bottom the keyboard will just hide it.

The same bug is still around in the Flutter codelabs.

@eddywm which branch/channel did you test this in? it's not in beta yet.

@acidjazz I'm on the beta branch.

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.4 17E199, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4)
[✓] Android Studio (version 3.1)
[✓] IntelliJ IDEA Community Edition (version 2018.1.4)
[✓] Connected devices (1 available)

@eddywm i think you have to wait until its in that branch, i believe this fix is only in the dev branch.

if you want, try flutter channel dev and then recompile/etc

It's fixed and text fields aren't obscured by the keyboard anymore, but I have another problem. Below text field I have button that I want to be visible when keyboard appears. Is there a way to add a offset to a point where it scrolls to make it scroll a little higher, or manually scroll so a button is above keyboard? Any other solution to this?

@dankop123 https://github.com/flutter/flutter/pull/18562/files should allow that with added scrollPadding currently only available in master

@zoechi Thanks!

I still have this issue, how can i fix it?

@joaovirgili
Please consider asking support questions in one of the other channels listed at http://flutter.io/support .

There's a workaround that should get around this:

new ListView(
  reverse: true,
  children: <Widget>[
    // put your text fields here
  ].reversed.toList(),
),

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).

Unfortunately, it can introduce a new bug if the scrolling pushes the text fields upwards and they end up getting hidden by the top. If you only have a few text fields and they're at the bottom of your ListView, this might be just fine, but it would still be a problem if you have a lot of text fields.

Thank you for posting your reply @collinjackson. I had the same problem. However, I was using ListView.builder, so it wasn't just like you did, but this workaround worked for me:

ListView.builder(
        reverse: true, // <======  ADDED THIS
        itemCount: tasks.length,
        itemBuilder: (context, index) {
          index = (index - tasks.length).abs(); // <======  ADDED THIS
          // Keep same code as before
        },
        ...
);

Actually, there was a few issues with this after testing, but adding resizeToAvoidBottomPadding: true to the Scaffold fixed mine.

Actually, there was a few issues with this after testing, but adding resizeToAvoidBottomPadding: true to the Scaffold fixed mine.

How can I put my form centered and when the keyboard is shown put all up of the keyboard?

You can use a SingleChildScrollView with a Column instead of a ListView to prevent the keyboard from dismissing. It won't solve the problem of the text field being hidden by the keyboard, but it would at least allow the user to scroll the field into view and then fill it out.

Thank You Brother. you solved my problem i had the issue like my error messages are gone, i have more form fields in form after clicking button i showing error to user, after scrolling to down and scroll upwards my errors are missing.
My Error widget tree:
Form -> Listview
Correct widget tree:
Form -> SingleChildScrollView -> Column

@eddywm i think you have to wait until its in that branch, i believe this fix is only in the dev branch.

if you want, try flutter channel dev and then recompile/etc

@acidjazz
not in master yet ?
cause I still have this issue on master

on the latest version, was working without any issues now appears to have returned.

please advise?

In my case I realized when I had windowFullscreen style attribute of the LaunchTheme set to true
<item name="android:windowFullscreen">true</item>,
SystemChrome.* methods did not work. These methods started working as expected when I set it to false.

Any update?

Don't know if this is still an issue, but it was for me today with the stable sdk branch. I noticed that the SingleChildScrollView was moving when the text field was being focused and almost outside of the viewport. So I thought that maybe the keyboard height was missing to the scrolling position. And indeed it was, I added the text field the property scrollPadding with the bottom view inset size and it worked like charm (MediaQuery.of(context).viewInsets.bottom). Hope it helps.

@hazzo Can you explain with little code please?
Because I'm having the same issue with keyboard hide TextField when pop up and I have tried every single solution exists here and in stackoverflow but no luck.
The problem is what the hell is wrong with the code
SingleChildScrollView, ListView , Column combination but no luck

@Blacktoviche something like this should do the trick:

class ColumnScrollView extends StatelessWidget {
  final List<Widget> children;
  final EdgeInsets padding;
  final CrossAxisAlignment crossAxisAlignment;
  final MainAxisAlignment mainAxisAlignment;
  final MainAxisSize mainAxisSize;

  const ColumnScrollView(
      {Key key,
      @required this.children,
      this.crossAxisAlignment = CrossAxisAlignment.center,
      this.mainAxisAlignment = MainAxisAlignment.start,
      this.mainAxisSize = MainAxisSize.max,
      this.padding = const EdgeInsets.symmetric(horizontal: 20.0)})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext ctx, BoxConstraints viewportConstrains) {
        return SingleChildScrollView(
          child: ConstrainedBox(
              constraints: BoxConstraints(minHeight: viewportConstrains.maxHeight),
              child: IntrinsicHeight(
                child: Padding(
                  padding: padding,
                  child: Column(
                    children: children,
                    crossAxisAlignment: crossAxisAlignment,
                    mainAxisAlignment: mainAxisAlignment,
                  ),
                ),
              )),
        );
      },
    );
  }
}

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
    return Scaffold(
      body: ColumnScrollView(
        children: [
          SizedBox(
            height: 400,
          ),
          TextField(
              scrollPadding: EdgeInsets.symmetric(vertical: keyboardHeight + 20) // 20 is default widget scroll padding,
              ),
          SizedBox(
            height: 400,
          ),
        ],
      ),
    );
  }
}

Thankx @hazzo but unfortunately it didn't work. But my code worked fine after little investigating about the problem cause.
please refer to this 64392#issuecomment-678997571 for more details

Wrap your widget inside Scaffold and set resizeToAvoidBottomInset: true,

There's a workaround that should get around this:

new ListView(
  reverse: true,
  children: <Widget>[
    // put your text fields here
  ].reversed.toList(),
),

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).
Unfortunately, it can introduce a new bug if the scrolling pushes the text fields upwards and they end up getting hidden by the top. If you only have a few text fields and they're at the bottom of your ListView, this might be just fine, but it would still be a problem if you have a lot of text fields.

Thank you for posting your reply @collinjackson. I had the same problem. However, I was using ListView.builder, so it wasn't just like you did, but this workaround worked for me:

ListView.builder(
        reverse: true, // <======  ADDED THIS
        itemCount: tasks.length,
        itemBuilder: (context, index) {
          index = (index - tasks.length).abs(); // <======  ADDED THIS
          // Keep same code as before
        },
        ...
);

This worked just fine, kept the list in same order. However need to do a +1 in the index reassignment to handle out of index.
index = (index + 1 - tasks.length).abs()

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.