ModalBottomSheetRoute: useSafeArea puts gap below sheet #121554
Description
Steps to Reproduce
- Execute
flutter runon the code sample, choosing a recent iPhone with non-zero insets including a camera notch (such as an iPhone 14 Pro) - Rotate the device so the notch is on the left (90° counterclockwise)
- Tap the first button, "Modal bottom sheet with useSafeArea: true"
- Bug:
useSafeAreacorrectly makes the sheet avoid the notch on the left, but it leaves a gap at the bottom, so the sheet doesn't open from the bottom. - Close the bottom sheet by tapping outside it, then tap the second button, "Modal bottom sheet with useSafeArea: false"
- The gap at the bottom is gone, but now the sheet isn't protected from the notch on the left, and content is obscured
Screen recording:
Expected results: I want to use the API to render a bottom sheet so it doesn't extend into the top or horiztonal insets, but it's still a bottom sheet (i.e., it opens from the bottom edge of the screen, and the sheet itself consumes the bottom inset).
Actual results: It doesn't seem possible with the current API (see steps above).
showModalBottomSheet(
context: context,
useSafeArea: useSafeArea, // <-- Screen recording shows true / false for this
builder: (BuildContext context) {
return Column(children: List.generate(4, (index) => MenuItemButton(onPressed: () {}, child: Text('MenuItemButton $index'))));
});Link to ModalBottomSheetRoute.useSafeArea doc: https://api.flutter.dev/flutter/material/ModalBottomSheetRoute/useSafeArea.html
Link to showModalBottomSheet doc: https://api.flutter.dev/flutter/material/showModalBottomSheet.html
Logs
(No crashes or exceptions expected or observed.)
$ flutter analyze
Analyzing modal_bottom_sheet_use_safe_area_repro...
No issues found! (ran in 2.0s)
$ flutter doctor -v
[✓] Flutter (Channel main, 3.8.0-17.0.pre.21, on macOS 13.0 22A380 darwin-x64, locale en-US)
• Flutter version 3.8.0-17.0.pre.21 on channel main at /Users/chrisbobbe/.local/lib/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 06952ba254 (3 hours ago), 2023-02-27 19:13:00 +0000
• Engine revision 4bba1b958e
• Dart version 3.0.0 (build 3.0.0-276.0.dev)
• DevTools version 2.22.1
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Users/chrisbobbe/Library/Android/sdk
• Platform android-33, build-tools 30.0.3
• ANDROID_HOME = /Users/chrisbobbe/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14C18
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
[✓] VS Code (version 1.75.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension can be installed from:
🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (4 available)
• Chris’s iPhone (mobile) • 00008110-000924383632801E • ios • iOS 16.1 20B82
• iPhone 14 Pro (mobile) • B10DA4B8-480B-4FE1-A651-4DFBE39ABF71 • ios •
com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator)
• macOS (desktop) • macos • darwin-x64 • macOS 13.0 22A380 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 110.0.5481.177
! Error: Chris’s Apple Watch needs to connect to determine its availability. Check the connection between the
device and its companion iPhone, and the connection between the iPhone and Xcode. Both devices may also need to
be restarted and unlocked. (code 1)
[✓] Network resources
• All expected network resources are available.
• No issues found!