Persistent bottom sheet does not respect SafeArea

[amitkot]

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

[pedromassangocode]

Reproducible on latest master as well.

flutter doctor -v

[✓] Flutter (Channel master, 1.24.0-8.0.pre.97, on Mac OS X 10.15.7 19H2 darwin-x64, locale en)
    • Flutter version 1.24.0-8.0.pre.97 at /Users/pedromassango/dev/SDKs/flutter_master
    • Framework revision 4c24eb10b8 (72 minutes ago), 2020-11-05 11:18:00 +0100
    • Engine revision e66a720137
    • Dart version 2.12.0 (build 2.12.0-21.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.1, Build version 12A7403
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • 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 1.8.0_242-release-1644-b3-6222593)

[✓] IntelliJ IDEA Community Edition (version 2020.2.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 50.0
    • Dart plugin version 202.7319.5

[✓] VS Code (version 1.50.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.16.0

[✓] Connected device (4 available)
    • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • macOS (desktop)             • macos         • darwin-x64     • Mac OS X 10.15.7 19H2 darwin-x64
    • Web Server (web)            • web-server    • web-javascript • Flutter Tools
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 86.0.4240.183

• No issues found!

[zepfietje]

The same issue occurs when directly setting the bottomSheet property of Scaffold.

Scaffold(
  bottomSheet: SafeArea(
    // ...
  ),
)

[noelmansour]

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.removePadding widget.

[tmaihoff]

Any updates here? Still having this issue

[Arenukvern]

Faced this issue too with top-notch.

Resolved using dart:ui.window.viewPadding.top / ui.window.devicePixelRatio

How it works:
The dart:ui.window.viewPadding is the number of physical pixels on each side of the display rectangle into which the view can render.
By dividing to ui.window.devicePixelRatio we should receive logic pixels.

So in summary code is

showModalBottomSheet<bool>(
      context: context,
      builder: (BuildContext context) => Container(
        height: MediaQuery.of(context).size.height,
        padding: EdgeInsets.only(
         top: ui.window.viewPadding.top / ui.window.devicePixelRatio,
        ),
      ),
    );

[n13]

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]

If you wrap the Scaffold in SafeArea it gets the work done, but if you want SafeArea's horizontal insets on the bottomSheet: you have to add some padding.

[StephenWithPH]

There is a workaround here: #50314 (comment)

Of note, that issue (#50314) seems to be the same basic issue as this one.