How to set showModalBottomSheet to full height but below status bar?

[klaszlo8207]

How can I do this?

[jonataslaw]

Please ask support questions on appropriate channels like stackoverflow.
Get just opens the BottomSheet with the overlayContext.
You can even use default Flutter's bottomsheet with Get.overlayContext

 showModalBottomSheet(
      context: Get.overlayContext, // rather context
      builder: (BuildContext bc){
          return Container(
            child: new Wrap(
            children: <Widget>[
        ListTile(
            leading:  Icon(Icons.music_note),
            title:  Text('Music'),
            onTap: () => {}          
          ),
           ListTile(
            leading:  Icon(Icons.videocam),
            title:  Text('Video'),
            onTap: () => {},          
          ),
          ],
          ),
        );
      }
    );

So, your issue is not a bug description or a resource request, and I can't help you here.

Put your question on the stackoverflow and I can answer you there.
If you have questions related to the library, (and not when Flutter widgets work), do not hesitate to open another issue.
Closing by offtopic.

[klaszlo8207]

I want with Get.bottomSheet, I tried to wrap in SafeArea but not worked. In your library how can I do that?

[jonataslaw]

I understand, this is a problem with Flutter's PopupRoute.
No one widget that uses PopupRoute respect to the SafeArea (BottomSheets, PopupMenu, etc.).

You can see more examples in these open issues in Flutter:

flutter/flutter#48677
flutter/flutter#39205

The error is very easy to solve, the problem is in this line 469:

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/bottom_sheet.dart

 Widget bottomSheet = MediaQuery.removePadding(
      context: context,
      removeTop: true, // HERE

In my opinion, removePadding should only be activated if it receives a bool per parameter to be able to disable this behavior.

 _ModalBottomSheetRoute({
    this.builder,
    this.theme,
    this.barrierLabel,
    this.backgroundColor,
    this.removeTop = true, // add this
    this.elevation,
    this.shape,
    this.clipBehavior,
    this.modalBarrierColor,
    this.isDismissible = true,
    this.enableDrag = true,
    @required this.isScrollControlled,
    RouteSettings settings,
  }) : assert(isScrollControlled != null),
       assert(isDismissible != null),
       assert(enableDrag != null),
       super(settings: settings);

  final WidgetBuilder builder;
  final ThemeData theme;
  final bool isScrollControlled;
  final bool removeTop; // add this
[...]

 Widget bottomSheet = MediaQuery.removePadding(
      context: context,
      removeTop: removeTop, // CHANGE FOR IT

In 3 lines, the problem in the Framework has been solved. You can rely on that to offer a PR on Git do Flutter, or even here on Get.

However, they will demand tests, and tests, and more tests to pass the PR, and I don't know if I have time for that.

I may include this in my lib in the future, but it is not a priority now.
If you want you can work on a PR on the lib, which I will gladly accept.

[jonataslaw]

Added on latest version

 Get.bottomSheet(
            isScrollControlled: true,
            ignoreSafeArea: false, // add this
            builder: (_) {
              return SafeArea( // and this
                child: Container(
                  child: new Column(
                    children: <Widget>[
                      Expanded(
                          child: Container(
                              color: Colors.red,
                              child: Center(
                                child: Text("text"),
                              )))
                    ],
                  ),
                ),
              );
            });

[juliavi]

Give the chid container a height - X% from the context's height, based on a MediaQuery

[Zeehshan]

Use IntrinsicHeight

[MrCsabaToth]

This issue becomes very important for every mobile app which allows device rotation: as soon as the device is rotated into landscape mode the sheet only occupies just a little more than a half of the screen and the content gets squashed and distorted easily.

[MrCsabaToth]

The linter complains about unnecessary Container in Jonathan's code so I brought it up to date (+ removal of new, <Widget>):

          Get.bottomSheet(
            SafeArea(
              child: Column(
                children: [
                  Expanded(
                    child: Container(
                      color: Colors.red,
                      child: Center(
                        child: Text("text"),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            isScrollControlled: true,
            ignoreSafeArea: false,
          );

[pzehle]

@MrCsabaToth your code will still leave a weird area in the bottom:

Any idea on how to actually make it fullscreen?

[MrCsabaToth]

@pzehle: Any idea on how to actually make it fullscreen?

That's interesting! I have a feeling this might be affected by screen settings. On Android there are ways to configure how the notch area is handled. On Android it's version dependent and I cannot find a good article, but there's a way to configure if the status bar area should be excluded from the app's estate, or the app's screen flow into it and the status bar icons overlay over it. https://thenextweb.com/news/how-to-change-your-android-status-bar

I see you are on iPhone, I wonder if there's settings for that as well. I'm bringing this up because that ugly see through space on the bottom happens to have kinda similar height as the status bar area with the notch, and I wonder if this is some effect that because the phone is configured to offer the whole status bar area for the app and now the parameters we use end up "shifting" the red area all the way up to the top, rather than leaving the status bar alone. Obviously it should work with this configuration as well, this looks like a UX bug, not sure if it's in GetX, or some core Flutter one. The best case scenario is if we can figure out how to work this around with some more parametrization of the SafeArea or related widgets.

Here is a screenshot of my OnePlus Nord, Android 12 (these settings evolved over versions), and here is a related setting:

I cannot remember where I configured it, or if I configured the notch behavior at all. Right now if I try some of my native Android augmented reality apps which supposed to be full screen also exclude the status bar area. I won't have time to play with this because I'm tied down, but I'm very interested in it, because if it happens with you it can happen with my users as well.

[MrCsabaToth]

Maybe a follow-up issue if needed because this is closed, or reopen this. Maybe we'll find a workaround.

[pzehle]

Thank you for a very detailed answer and explanation. Yeah, it seems weird to me as well, and I have no clue what might be triggering this. I need to deliver this soon, so I will keep you posted if I find the solution or anything at all.

Thanks!