Repository navigation
Persistent bottom sheet does not respect SafeArea #69676
Description
When showing a persistent bottom sheet SafeArea is ignored and does not provide bottom padding:
Code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(home: MyHomePage());
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) => Scaffold(
floatingActionButton: Builder(
builder: (context) => FloatingActionButton(
onPressed: () {
showBottomSheet(
context: context,
builder: (context) => SafeArea(
child: Container(
height: 100,
width: 200,
color: Colors.red,
),
));
},
),
),
);
}[✓] Flutter (Channel stable, 1.22.2, on Mac OS X 10.14.6 18G6032, locale en-IL)
• Flutter version 1.22.2 at /Users/amit/fvm/versions/stable
• Framework revision 84f3d28555 (3 weeks ago), 2020-10-15 16:26:19 -0700
• Engine revision b8752bbfff
• Dart version 2.10.2
Activity
[-]Persistent bottom sheet does not respect `SafeArea`[/-][+]Persistent bottom sheet does not respect SafeArea[/+]pedromassangocode commentedon Nov 5, 2020
Reproducible on latest master as well.
flutter doctor -v
zepfietje commentedon Dec 2, 2020
The same issue occurs when directly setting the
bottomSheetproperty ofScaffold.noelmansour commentedon Aug 3, 2021
This top safe area is also not respected as outlined in this stackoverflow post.
The suggested answer is to copy the BottomSheet widget and update the build method to remove the
MediaQuery.removePaddingwidget.tmaihoff commentedon Nov 6, 2021
Any updates here? Still having this issue
Arenukvern commentedon Nov 24, 2021
Faced this issue too with top-notch.
Resolved using
dart:ui.window.viewPadding.top / ui.window.devicePixelRatioHow it works:
The
dart:ui.window.viewPaddingis the number of physical pixels on each side of the display rectangle into which the view can render.By dividing to
ui.window.devicePixelRatiowe should receive logic pixels.So in summary code is
n13 commentedon Feb 16, 2022
We are facing this issue as well.
We have a persistent bottom button on the bottom sheet, but it's too low down on iPhone - SafeArea is ignored.
Is there a different way to have a persistent bottom button?
0xHristo commentedon May 18, 2022
If you wrap the
ScaffoldinSafeAreait gets the work done, but if you want SafeArea's horizontal insets on thebottomSheet:you have to add some padding.StephenWithPH commentedon Aug 1, 2023
There is a workaround here: #50314 (comment)
Of note, that issue (#50314) seems to be the same basic issue as this one.
Respect safe area in bottom sheet
Respect safe area in bottom sheet
iazel commentedon Feb 22, 2026
The issue still persist for the latest stable release (3.41.0)
Enable SafeArea on Scaffold bottomSheet