Scaffold body is hidden behind bottomSheet

Steps to Reproduce

Clone https://github.com/yringler/reproduce-bottom-sheet
Run it

Expected results:
The body should be scroll-able to see all content.

Actual results:
Part of the body content is cut off, and it can't be scrolled to

I'm trying to add media controls along the bottom of app, across all app routes. Using bottom sheet worked great, until I noticed that it was covering the body.
Is that intended behavior? Is that documented somewhere? How is bottom sheet intended to be used? Is there a way to dynamically size body according to available space?

BTW, ❤️ flutter. It was actually kinda fun making that reproduction case, and took like 3 minutes.
Note the usage of MediaQuery to make sure that the unexpected behavior always occurs, regardless of device size. 😌

@yringler

Hi @yringler
As workaround you can set bottom padding to the body with the same value that you set to the bottomSheet height

body: Padding(
        padding: EdgeInsets.only(bottom: MediaQuery.of(context).size.height / 7),
        child: Center(...),
)

Thank you.
It's a little more tricky for actual app because the bottom sheet isn't always showing (only when audio is playing), but a little streambuilder (abstracted to it's own widget) has everything working great.
(here's the widget which gives child padding if audo bar is visible, and widget which tells child if audio bar is visible)

@yringler

Hi @yringler,
Can you please confirm if this is still an issue on latest Flutter channel (eg : dev, master) ?

Yep, switched to flutter channel master, ran flutter upgrade, flutter clean, and ran it again, still an issue.
Here's the output of flutter doctor:

octor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.20.0-3.0.pre.193, on Linux, locale en_US.UTF-8)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ✗ Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit
      https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions.
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.46.1)
[✓] Connected device (2 available)

! Doctor found issues in 1 category.

I can confirm this issue still occurs in Flutter 1.22.4.

Can anyone confirm this really is a bug and not expected behavior?
Since any widget can be passed as bottomSheet to Scaffold (to be shown permanently), I do feel like it is a bug that body content gets covered by the persistent bottomSheet widget.

Verified and replicable on latest stable. Content beyond 5 is hidden behind bottomsheet which isn't scrollable.

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.4, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-IN)
    • Flutter version 1.22.4 at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 1aafb3a8b9 (3 weeks ago), 2020-11-13 09:59:28 -0800
    • Engine revision 2c956a31c0
    • Dart version 2.10.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • 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.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.9.3

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (1 available)
    • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86 • Android 11
      (API 30) (emulator)

• No issues found!

Facing the same issue in 3.10.2. As a workaround, I moved the bottomsheet widget inside the scaffold body and pushed it to the bottom of the page using the Column and Expanded widgets. This way I don't have to worry about the bottomsheet widget's height.

Scaffold(
  appBar: AppBar(
    title: const Text('Appbar'),
  ),
  // bottomSheet: Container(child: Text("Bottom Sheet")),
  body: Column(
    children: [
      Expanded(
        child: ListView(
          children: List.generate(50, (index) => index + 1)
              .map((item) => Text("Item $item"))
              .toList(),
        ),
      ),
      Container(child: const Text("Bottom Sheet")),
    ],
  ),
);

@CevinWays

As pointed out by @CevinWays, I use bottomNavigationBar instead of bottomSheet to solve this issue. I do not know if it has any side effect though.

Instead of

return Scaffold(
    ...
    bottomSheet: buildBottomSheet(),
    bottomNavigationBar: bulidBottomNavigationBar(),
);

use

return Scaffold(
    ...
    bottomNavigationBar: Column(
        mainAxisSize: MainAxisSize.min,    // this is necessary
        children: [ 
            buildBottomSheet(),
            bulidBottomNavigationBar(),
        ],
    ),
);

Flutter 3.10.6 the same issue

Flutter 3.13.6 has the same issue

Is there any good workaround for this issue? Facing it on 3.13.9 and 3.16.8

Is there any good workaround for this issue? Facing it on 3.13.9 and 3.16.8

#50314 (comment)

Navigation Menu

Repository navigation

Scaffold body is hidden behind bottomSheet #50314

Steps to Reproduce

27 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Scaffold body is hidden behind bottomSheet #50314

Description

Steps to Reproduce

Activity

yringler commented on Feb 7, 2020

yringler commented on Feb 7, 2020

VladyslavBondarenko commented on Feb 7, 2020

yringler commented on Feb 7, 2020

darshankawar commented on Jul 9, 2020

yringler commented on Jul 9, 2020

zepfietje commented on Dec 2, 2020

darshankawar commented on Dec 3, 2020

27 remaining items

vipranarayan14 commented on Jun 20, 2023

innomatica commented on Jul 11, 2023

egormzln commented on Aug 17, 2023

thecoder-co commented on Jan 21, 2024

yasht01 commented on Feb 13, 2024

ViniciusCdeAlmeida commented on Aug 12, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions