Bottomsheet is overlapped by the keyboard ( Both persistent and modal )

[iampawan]

---

I want to implement something like this . I used modalbottomsheet with a texfield inside that but as soon as I click on it my bottomsheet with height around 100.0 is overlapped by the keyboard . I tried to fix this but couldn't . Please help thanks

[thelazyindian]

Well I found a workaround for this issue

[iampawan]

@thelazyindian Yes, I would love to hear that.

[thelazyindian]

Basically I used AnimatedPadding inside which Mediaquery viewInsets gets me the required padding after keyboard pops up to push the modalBottomSheet from bottom and thus preventing keyboard from overlapping my modalBottomSheet. Still there's some issue, The word suggestions bar displaying just above keyboard still overlaps bottom sheet lol. Still a better fix is needed.

return new AnimatedPadding(
            padding: MediaQuery.of(context).viewInsets,
            duration: const Duration(milliseconds: 100),
            curve: Curves.decelerate,
            child: new Container(
              alignment: Alignment.bottomCenter,
              child: Wrap(
                children: <Widget>[
                                  new Text("Blah Blah"), 
                               ],
                         ), 
                 ),
        );

[frederickcxa]

Any other solution for this?

[eurotrip11]

Any news for this?

[rodydavis]

I took @thelazyindian approach and did exactly what @iampawan was trying to do:

https://github.com/AppleEducate/Tasks

on the page: lib>pages>home_page.dart
https://github.com/AppleEducate/Tasks/blob/master/lib/pages/home_page.dart

[zoechi]

Looks like a dup of #18564 (this is older but the other has more activity)

[goderbauer]

Dupe of #18564.

[socrates93]

Basically I used AnimatedPadding inside which Mediaquery viewInsets gets me the required padding after keyboard pops up to push the modalBottomSheet from bottom and thus preventing keyboard from overlapping my modalBottomSheet. Still there's some issue, The word suggestions bar displaying just above keyboard still overlaps bottom sheet lol. Still a better fix is needed.

return new AnimatedPadding(
            padding: MediaQuery.of(context).viewInsets,
            duration: const Duration(milliseconds: 100),
            curve: Curves.decelerate,
            child: new Container(
              alignment: Alignment.bottomCenter,
              child: Wrap(
                children: <Widget>[
                                  new Text("Blah Blah"), 
                               ],
                         ), 
                 ),
        );

This works correctly. Additionally, to the showModalBottomSheet you must add the isScrollControlled to true. With this, it works wonderfully.

[github-actions]

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.