[showModalBottomSheet] fix: showModalBottomSheet does not move along keyboard

[ZainUrRehmanKhan]

Description

This issue was found in release 1.22, 1.23, 1.24 that the showModelBottomSheet was not moving along the keyboard, the bottom sheet contains a TextField which open up the keyboard on focus, so if the height of bottom sheet is less then the height of keyboard then the bottom sheet was hidden behind the keyboard.

showModelBottomSheet with TextField unfocused:

When we Focus on TextField - Before Changes:
Bottom Sheet is hidden behind the keyboard.

When we Focus on TextField - After Changes:

Related Issues

#71418

Checklist

Before you create this PR, confirm that it meets all requirements listed below by checking the relevant checkboxes ([x]). This will ensure a smooth and quick review process.

• I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
• I signed the [CLA].
• I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
• I read the [Tree Hygiene] wiki page, which explains my responsibilities.
• I updated/added relevant documentation (doc comments with ///).
• All existing and new tests are passing.
• The analyzer (flutter analyze --flutter-repo) does not report any problems on my PR.
• I am willing to follow-up on review comments in a timely manner.

Breaking Change

Did any tests fail when you ran them? Please read [Handling breaking changes].

• No, no existing tests failed, so this is not a breaking change.

[flutter-dashboard]

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact Hixie on the #hackers channel in Chat.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

[ZainUrRehmanKhan]

Kindly review my pull request.

[dkwingsmt]

The change looks solid. Please add a unit test to make sure someone doesn't accidentally revert it (probably a golden test).

[flutter-dashboard]

This pull request executed golden file tests, but it has not been updated in a while (20+ days). Test results from Gold expire after as many days, so this pull request will need to be updated with a fresh commit in order to get results from Gold.For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

[ZainUrRehmanKhan]

I'm writing a test for this PR.

[dkwingsmt]

Tiny issues. Everything else looks great!

[ZainUrRehmanKhan]

Suggested changes done.

[ZainUrRehmanKhan]

@dkwingsmt Updated my branch to the latest master. That should resolve some failing tests.

[ZainUrRehmanKhan]

?

[dkwingsmt]

LGTM

[davidmartos96]

@dkwingsmt Could we have a way to make this change opt out? I currently have some modal bottom sheets where I place the textfields (usually for filtering results) at the top of a quite large bottomSheet, so the keyboard will not hide it. With this PR everything will be pushed above the keyboard which may be considered somewhat breaking. What are your thoughts?

[dkwingsmt]

@davidmartos96 You are right. Although to make a modal bottom sheet hidden by the on-screen keyboard does not really sound correct to me. A displayed modal bottom sheet is supposed to prevent the user from interacting with the rest of the app. Will normal showBottomSheet suit your needs?

[davidmartos96]

@dkwingsmt I may have not expressed myself correctly. Sorry about that.
The usecase I'm referring to is a TextField inside the modal bottom sheet, but where the bottom sheet will be about 70% tall of the screen height. I have some of those modal sheets in my app, but I display the text field at the top knowing that up to now the keyboard would hide the lower portion of the bottom sheet (and I'm fine with that in my usecase).
With the PR I worry that all the bottom sheet will be pushed too much overflowing the screen height. I agree with the changes made in the PR but I would suggest including an option similar to resizeToAvoidBottomInset in the Scaffold so that this behavior can be opted out (https://api.flutter.dev/flutter/material/Scaffold/resizeToAvoidBottomInset.html)
If the Flutter team agrees to such new option I could open a PR with it.

[dkwingsmt]

Can you achieve the same result by manually applying a negative bottom padding? Actually, you can get the height of your sheet and the screen height to calculate the exact amount of underflow for you to avoid overflowing.

[davidmartos96]

@dkwingsmt I'm not sure I follow you with the negative padding. Does Flutter support negative padding?

[Peng-Qian]

Personally, I think this is a bad idea to force ModalBottomSheet to resize itself. I am experiencing the same issue as @davidmartos96 says.

At least we need a parameter to control if the ModalBottomSheet should resize or not (just like Scaffold). And why padding should wrap BottomSheet to force resize to avoid keyboard? (we can just add padding inside ModalBottomSheet to achieve the same effect.)

[dkwingsmt]

@HansMuller Are you more familiar with how Material Design defines ModelBottomSheet? Can you take a look at the requests above?

[Peng-Qian]

@dkwingsmt Thanks for your quick response!

Please imagine ModalBottomSheet takes 5/6 of full-screen height and it used to pick a country(e.g. New Zealand), so it will be a scrollable list and contains many items, and on the top of this list, there is a search bar that contains a TextField.

If the ModalBottonSheet forcibly resizes as the keyboard shows, It will push the search bar to the very top of the screen, it not only breaks the UI looking but also break the feature. Because the phone notification bar will overlay on it.

Moreover, padding when the keyboard shows is a brutal way to avoid keyboard overlay. Please check out this https://pub.dev/packages/keyboard_avoider package. I don't think flutter should limit us on how to design the Application.

[dkwingsmt]

We're reverting this PR in #77286. Various sources have reported that the previous behavior is the desired one.

[totroi]

We're reverting this PR in #77286. Various sources have reported that the previous behavior is the desired one.

Any tips on what to do to have the behavior of the original commit (moving up with the keyboard)?

Maybe an specific modal could be created, like showModalBottomSheetFlexible ? I'd prefer to have it behave that way

[totroi]

We're reverting this PR in #77286. Various sources have reported that the previous behavior is the desired one.

Any tips on what to do to have the behavior of the original commit (moving up with the keyboard)?

Maybe an specific modal could be created, like showModalBottomSheetFlexible ? I'd prefer to have it behave that way

Actually it you be much better if one could simply define the "height" of it. Being able to elongate it up just a little would solve my problem.

And also being able to define which children would move upwards with the keyboard, and which would get hidden behind the keyboard. That would be ideal.

[davidmartos96]

@totroi You can get the behavior by wrapping the bottom sheet builder with:

Padding(
  padding: MediaQuery.of(context).viewInsets
)

That's essentially what the reverted PR was doing

[totroi]

@totroi You can get the behavior by wrapping the bottom sheet builder with:

Padding(
  padding: MediaQuery.of(context).viewInsets
)

That's essentially what the reverted PR was doing

Thanks! Problem is I'm seeking to move a Card inside the modal up, and move the modal up just the amount required for the Card to move. Like about 30 pixels...

I managed to shrink all the paddings inside the Card widget and it looks okay, but the best result would be those 30 pixels up whenever the keyboard is opened.