flutter
flutter copied to clipboard
flutter
Support for sheet presentation style
Use case
Sheet
The sheet presentation style appears as a card that partially covers the underlying content and dims all uncovered areas to prevent interaction with them. The top edge of the parent view or a previous card is visible behind the current card to help people remember the task they suspended when they opened the card. People dismiss a card by:
- Swiping down from the top of the screen
- Swiping down from anywhere on the screen when card content is scrolled to the top
- Tapping a button
- Use a sheet for nonimmersive modal content that doesn’t enable a complex task.
https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/#sheet
Proposal
Add sheet to CupertinoPageRoute class.
This is being tracked as a part of https://github.com/flutter/flutter/issues/35026, but I'll keep this issue open for specifics.
I'm going to work on implementing this soon! It's good to see that there is a need for it.
This was brought up in https://github.com/flutter/flutter/issues/42894 under the name Modal Presentation. Also note that this is an iOS 13 feature.
I wanted to get this out, but unfortunately I can't work on this in the foreseeable future due to other priorities. If anyone else wants to take a crack at it I'd be happy to help out with advice and review. I know this is important for iOS apps.
@justinmc had you started this at all?
FYI, there's also this, which appears to implement the presentation sheet style although I haven't tried it myself: https://pub.dev/packages/cupertino_stackview/
That's good to hear that there is a pub package, hopefully that will help a lot of people out. I looked into implementing it by modifying CupertinoPageRoute, but I never got beyond the exploration phase in my code.
In case someone needs this, I've implemented a solution that works similar to the current Flutter modals.
https://github.com/jamesblasco/modal_bottom_sheet.
showCupertinoModalBottomSheet will display a new sheet-presentation-style modal.
You will also have to change the previous route with a new MaterialWithModalsPageRoute, as
unfortunately, MaterialPageRoute can only translate to a MaterialPageRoute or CupertinoPageRoute.
Happy to help implementing this inside Flutter. Related issue #33798
The package looks great. We might want to de-duplicate some code around the styling of the menu items here and in CupertinoContextMenu (see the gifs in https://github.com/flutter/flutter/pull/37778).
CC @xster for opinions on bringing this into Flutter
Thanks for the great work @jamesblasco. If you're willing, we'd love to take your PR to bring that package into flutter.
To set expectations on the timing, since it's a somewhat central part of the navigation, we might end up having to work through a number of integration points together. Some the integration edge cases might be known like https://github.com/flutter/flutter/issues/33799 and some we might discover along the way. If you're willing to work through them, I'd be happy to work with you to bring your PR through :)
I've taken a look at your package and love that APIs are documented. It's a great start.
That would be awesome @xster. I would be happy to bring that PR.
I think it would be nice to start with a chat/email with the main points needed to bring this into Flutter. Let me know what you think about that. We can move this to email if you prefer [email protected]
I'll just reply here since this is all a public process. The main actionable thing is to take a look at https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo and do your best to follow it in your PR since that's generally how we review them.
@jamesblasco Hey! Would you be able to submit a PR? Let's talk to get your PR up and running. This is an important feature that's missing for Flutter and we would love to have your contribution!
Just a quick summary of your next steps:
- Fork the Flutter repo
- Make a draft PR (just throw anything to get started--doesn't need to be final.)
- We'll take the discussion there :)
If you need help with submitting the PR, please email me at [email protected]
Yes!! Sorry, but I have been quite busy the last days and also working on another feature https://github.com/flutter/flutter/issues/36985#issuecomment-699691218.
I will try to create the PR in the next few days.
Hello! I created the PR https://github.com/flutter/flutter/pull/67515
I also uploaded an example that uses that branch https://github.com/jamesblasco/modal_bottom_sheet_example
Looking forward to hearing your feedback there :)
Hmm, 1.5 years and this is still not merged? How can we help to get this behavior available ASAP?
Per https://github.com/flutter/flutter/pull/67515#issuecomment-990308149, it seems like the focus is back on the library https://github.com/jamesblasco/modal_bottom_sheet for now
We've had additional requests for this feature from internal customers. modal_bottom_sheet won't meet their needs due to incompatibility with the router API https://github.com/jamesblasco/modal_bottom_sheet/issues/88
/cc @justinmc
@jmagman Sadly I haven't had as much time as I would like to focus on the library. But my main goal right now it is to release in the upcoming months a new version built from scratch. I have been using this new version for several clients already but I want to increase the test coverage and add a migration guide before I publish it into pub.dev This version would be compatible with the Router Api, and you would be able to use SheetPage and CupertinoSheetPage to display modal bottom sheets.
https://github.com/jamesblasco/modal_bottom_sheet/tree/sheet
Let me know if that would be something that could might be of interest
@jamesblasco I'm currently migrating my project to navigator 2.0 and I look forward to the new library :) Can I contribute somehow to the new version to speed up the publishing process?
