Multiple different heights

[SF-Simon]

Hello, this is a great component. I fell in love with it at the first sight. I hope I can use it all the time.

I have a requirement now. I want content to show different styles at different heights. However, I use the modal_bottom_sheet to find that either close or display can't slide to different heights.

Maybe I don't know how to use it, or it needs some updates.

Thank you.

[jamesblasco]

Hello!

Thanks for submitting the issue. For the moment the package only works with one size(expanded or not) and you can open or close it.

I have added to the roadmap the availability to start the modal to a predefined height. And then drag to expand it full height or close it.

However I haven’t planned to had more than two heights(initial size and full size). I haven’t seen any modal in iOS or Android that do that.

If you are looking for multiple heights maybe you are looking for persistent bottom sheet instead of a modal bottom sheet. They work very similar, except persistent bottoms sheet is a widget that you add to a view and you can expand or collapse. Modal bottom sheets is a new route that you push above the current one.

For example the bottom sheet for google maps that you can drag to three different sizes are not modals.

While I have in mind to support persistent modals in the future, I am focused now on improving the modals.

Let me know if one more fixed size would be enough for you.

[SF-Simon]

If there are multiple heights in the modal content, I can cooperate with the slicer component to do more effects.

If I want users to see more content than modal content, then multiple heights are very helpful.

And my modal content will change the height according to the user's operation, so many heights can help me to do more things.

This is persistent bottom sheet, which can't be implemented for me.

This will save me a lot of time.

Thx.

[bierbaumtim]

I agree with @jamesblasco that the next goal should be improving the modals. Because as I think the main purpose of this package is to provide Modals which follows the guidelines and behaves as the native ones, as the Flutter Framework does itself. But Flutter also gives you the ability to build every custom UI and custom behaviour, so you can build it by yourself or search packages which contains widgets with your expected behaviour.

[jamesblasco]

@bierbaumtim thanks for the great explanation.

I agree that the goal of this package should be create good-quality modals based on the Flutter widgets but improve them with some missing features.

What you propose it is very time consuming and it would need a different widget structure to the one we are currently following.

I found this packages it might me of your interest. https://pub.dev/packages/expandable_bottom_sheet https://pub.dev/packages/snapping_sheet

[LOG-TAG]

@jamesblasco great one, instead of creating another enhancement request I just want to highlight it here! for the ios fake device frame it will be a good idea to add this https://pub.dev/packages/device_preview ?

also anyone here explored using child: NotificationListener<DraggableScrollableNotification> ?this might be helpful for multiple hight scenario

[jamesblasco]

Thanks for the suggestion @LOG-TAG, that package is awesome, but at the time I build the preview it was not working correctly on web. Also you can not just add the device frame and add content next to it. I think for demo purposes this is quite enough.

What do you mean with DraggableScrollableNotification? This is something built for DraggableScrollableSheet and I think it would be a great idea to implement that notification or something similar for detect when the sheet is being dragged. But this cannot be used to implement the multi-height feature only to empower it

[bierbaumtim]

Device-Preview uses path drawing which currently is not supported on flutter web except you compile your web app with --dart-define=FLUTTER_WEB_USE_SKIA=true. Then it is based on CanvasKit which uses WebGL and WebAssembly but it is experimental and i think the longterm goal is to create a dart2wasm compiler.

It is a known limitation: https://github.com/aloisdeniel/flutter_device_preview/issues/39

[jamesblasco]

mmmh maybe I forgot to run in with skia then, but the web demo is currently compiled with CanvasKit.

Thanks for sharing!

[Ibtesam-Mahmood]

Hi, I was wondering if there was any progress on this. I have many cupertino modals in my application each has some sort of scroll view within it. To match the designs for the application, the modal must expand when scrolled then allow for the internal scroll view to continue scrolling when fully expanded. Is it possible to implement this with the current version or possibly an existing branch

[jamesblasco]

I have no plans to work on this for the next three following months. I am pretty busy with other projects that I have to prioritize. Sorry about this. I think it is possible but would require a bit of refactor. You are welcome to fork the project and try to implement yourself.

I will come back to this when I find some free time. I wish I could be working on it 🙂

[omidraha]

I have added to the roadmap the availability to start the modal to a predefined height. And then drag to expand it full height or close it.

Hi, Is there a way for doing this manually until release this feature? And this feature when will be available? Thanks.

[CavalcanteLeo]

Almost 3 years, so, this will never be released

[wilyanto]

It's 2023 now :(