Add bottomOverlayContent to ModalBottomSheet #826
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Proposed Changes
This PR introduces a new optional parameter
bottomOverlayContenttoModalBottomSheet, enabling developers to place persistent UI (e.g., action buttons) that is fixed at the bottom of the sheet during expansion, while animating out with the sheet when dismissed.Many modal bottom sheets include critical actions (like "Confirm" or "Send") that should remain visible and accessible at the bottom, even as users scroll through long content. Currently, such content scrolls out of view or requires complex workarounds using Box and manual offset tracking. This is why I decided to copy part of the ModalBottomSheet code and modify it in my own project. After extensively testing this change in a production app with over 40 million users, where it has been live for a few months with zero reported issues, I’m now contributing it back via this PR.
The
bottomOverlayContentis implemented via a custom Layout inside aBoxScope, aligned toAlignment.BottomCenter. It measures its children with constraints limited bysheetMaxWidth, computes the content’s intrinsic size, and derives the initial anchor position fromSheetState(preferringPartiallyExpanded, falling back to a fraction ofHidden). Using the draggable offset, it calculates a vertical translation that keeps the content pinned to the sheet’s bottom during expansion. On collapse, this offset increases smoothly, causing the content to slide out from the bottom in sync with the sheet’s dismissal animation.Testing
Test: Manually and in production
Sample:
UI tests have not been added for this change, please let me know if they are required for acceptance.