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

Created on 17 Apr 2020  路  5Comments  路  Source: jonataslaw/getx

How can I do this?

Most helpful comment

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"),
                              )))
                    ],
                  ),
                ),
              );
            });

All 5 comments

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.

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

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:

https://github.com/flutter/flutter/issues/48677
https://github.com/flutter/flutter/issues/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.

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"),
                              )))
                    ],
                  ),
                ),
              );
            });

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

NO-ob picture NO-ob  路  4Comments

rupamking1 picture rupamking1  路  3Comments

jemariads picture jemariads  路  4Comments

wailashraf71 picture wailashraf71  路  4Comments

GoldenSoju picture GoldenSoju  路  3Comments