Modal Bottom sheet doesn't resize correctly

[SpencerLindemuth]

If I use a modal bottom sheet like below,

await showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))
      ),
      backgroundColor: Colors.transparent,
      builder: (BuildContext context) {
        return ResponsiveWrapper.builder(
             Container(),
             breakpoints: [...]
       );
);

The content becomes centered instead of aligning top like it does normally. Also I use bottom sheets with inputs which I float above the on screen keyboard using isScrollControlled = true to enable it to take up more than 50% of the screen, but with the ResponsiveWrapper it covers the entire screen and centers the child. I think this is because ResponsiveWrapper.builder technically returns a Stack with alignment:center but is there a way to keep the native flutter experience here of top aligning and shrinkwrapping height in modalBottomSheet?

Here are some photo examples:
Without responsive builder the bottom sheet wraps content

Without responsive and with the keyboard open it hovers just over the keyboard (because isScrollControlled = true) and wraps content

With responsive builder it expands to cover the entire screen

[rayliverified]

Thanks for reporting!

Can you try setting shrinkWrap to true?

That most likely won't fix the issue unfortunately but I will be working on a fix for the modals and SafeArea issues in a month.

[SpencerLindemuth]

Unfortunately showModalBottomSheet doesn't have a shrinkWrap property. I do have my child column set to MainAxisSize.min which I think is about as close to shrinkWrap as I can get. Overall this is an amazing package and I look forward to your updates!

[rayliverified]

Thanks for the kind words! There's a shrink wrap property in the Responsive Framework

[SpencerLindemuth]

That actually worked! The issue was also that I was using ResponsiveWrapper.builder(), but after switching to just a ResponsiveWrapper() class and settings shrinkWrap to true it's working! The trouble now is that it doesn't scale the MediaQuery.of(context).viewInsets.bottom properly with the keyboard open so on smaller screens the input is hidden behind the keyboard, but that's something I can figure out on my own! Thanks again for the help!

[rayliverified]

Great! If you are interested in solving the modal resize problem, I can point you in the right direction.

The solution is in Alois Deniels Device Preview package. He's solved the offset and modal resize and I have yet to port his solution over.

[SpencerLindemuth]

I'll look into it and try to make a pull request! Thanks again.

[tjarvstrand]

@searchy2 @SpencerLindemuth Was the bottom inset issue ever solved in this package? I'm seeing the behavior in my app and I'm looking for a solution. If it's still an open issue, it would be great with an example of, or link to, the aforementioned workaround in flutter_device_preview. I had a look but it's quite a bit of code to wade through :)

[rayliverified]

Hmmm, @SpencerLindemuth can you share how you solved the bottom keyboard insets?
I've learned a lot more about the keyboard insets recently and there might be some modifications needed in this library.

[tjarvstrand]

I was actually just able to solve my issue by passing mediaQuerydata: MediaQuery.of(context) into ResponsiveWrapper.builder

[rayliverified]

Great to hear, thanks for reporting!