-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Add useSafeArea parameter to showModalBottomSheet
#107140
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add useSafeArea parameter to showModalBottomSheet
#107140
Conversation
1a18183 to
3985b68
Compare
Piinks
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you check #39205 (comment)? It mentions Scaffold.of(context).showBottomSheet(... and showModalBottomSheet(... as test cases, and another comment mentions persistent bottom sheet. I do not know that they are the same, but it would be good to have test cases since they were mentioned.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would this not also fix this?
| return Container(); | |
| return MediaQuery( | |
| data: MediaQuery.of(context) | |
| child: Container() | |
| ); |
I think adding a flag to override the inner workings of a widget is not a scalable pattern across the framework, and not very different from the solution above, especially in terms of being discoverable to the user. I haven't been able to find another case of overrideMediaQuery, but this was likened to the Scaffold.extendBody in the linked issue. Maybe just using the same naming convention will make it easier for the user to associate its purpose.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would this not also fix this?
Did you meant MediaQuery.of(outerContext)? If yes, this is one of the workaround for this issue: storing the parent context, as done in this unit test. The problem is that this workaround is not easily discoverable and relies on a good understanding of BuildContext 😉
I think adding a flag to override the inner workings of a widget is not a scalable pattern across the framework
I agree too. The problem here is that BottomSheet inner workings relies on something that few widget do : consuming padding using a call to MediaQuery.removePadding. Doing so, it breaks the inner SafeArea that a user might want to add (and it is very difficult for the user to find why composition with a SafeArea does not work inside a BottomSheet). I think the Flutter way would have been to let the user use composition to decide if he wants to consume the top padding. Just my 2 cents to explain why this fix is mainly a way to find an official workaround without breaking existing code. Otherwise, users will use workarounds such as this one: adding an inner MaterialApp!.
Adding a property is the good option for compatibility and I agree that the main point is to find a good name for it. I agree too that overridesMediaQuery is not very good and unusual. extentBehingNavigationBar will be on par with Scaffold similar property, but discoverability is not optimal and this name is not fully self explanatory in the BottomSheet case. Naming is hard 😄
I just remembered that showDialog has a useSafeArea property. We might do something similar here. Its default value would be false. If true, instead of adding a MediaQuery that consumes the topPadding, we can insert a SafeArea. It will also make showModalBottomSheet and showDialog similar. And I think it is great for discoverability because most of the users participating in those issues were looking for a way to add a SafeArea in their BottomSheet.
@Piinks I could try to implement this, do you think adding a useSafeArea property is a valuable approach?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Well said! I do appreciate how thorough you always are. :)
I think useSafeArea makes sense so we have a consistent patterns for showModalBottomSheet and showDialog.
Can you try it with the test cases reported in the issue? I think this sounds like a great solution.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Piinks
I updated the PR according to our previous discussion: adding a useSafeArea parameter to showModalBottomSheet.
About persistent bottom sheets, shown using showBottomSheet or Scaffold.bottomSheet property, despite both implementations adding a BottomSheet instance, the way they insert this widget in the tree is very different. The unusual MediaQuery.removePadding call is only done when calling showModalBottomSheet :
| final Widget bottomSheet = MediaQuery.removePadding( |
There is one open issue, #69676, related to showBottomSheet and SafeArea. After investigating it, I think it is more actionable to not cover these two different cases in the same PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great! Thanks for investigating!
3985b68 to
33dc57b
Compare
useSafeArea parameter to showModalBottomSheet
Piinks
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This closes a bunch of issues, well done! LGTM!
|
Sorry, when this feature is going to be released? It is already in documentation for 3.3.10, but not in the source code, which is confusing. |
|
It looks like this feature is going to be released in Flutter 3.4. The merge commit (9bd058e) is in the pre-releases of Flutter 3.4 |
Description
This PR adds anoverrideMediaQueryparameter toshowModalBottomSheet.This PR adds an
useSafeAreaparameter toshowModalBottomSheet.Motivation : #39205 (comment)
showModalBottomSheetadds its own MediaQuery to remove top padding. That makes using an innerSafeAreanot possible.With this PR, if
useSafeAreaparameter is true a SafeArea will be automatically added.Related Issue
Fixes #39205
Fixes #70701
Fixes #48677
Tests
Adds 1 test.