Safearea not working in showModalBottomSheet

Safearea() does not wrap the showModalBottomSheet properly. I need to show the modal under the status bar.

class ModalBottomSheet {
  static void renderModalBottomSheet(BuildContext context, Widget widget) {
    showModalBottomSheet(
      isScrollControlled: true,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(border2),
        ),
      ),
      context: context,
      builder: (BuildContext context) {
        return SafeArea(
          child: Container(
            padding: EdgeInsets.only(
              bottom: MediaQuery.of(context).viewInsets.bottom,
            ),
            child: widget,
          ),
        );
      },
    );
  }
}

I have tried the following solutions but it still doesn't work properly

MediaQuery.of(context).padding.top


MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top

Update:

I managed to solve it this way.

add this to the bottomsheet

backgroundColor: Colors.transparent,

and padding top

top: MediaQuery.of(context).padding.top,

full code:

class ModalBottomSheet {
  static void renderModalBottomSheet(BuildContext context, Widget widget) {
    showModalBottomSheet(
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      context: context,
      builder: (_) {
        return SafeArea(
          child: Padding(
            padding: EdgeInsets.only(
              top: MediaQuery.of(context).padding.top,
              bottom: MediaQuery.of(context).viewInsets.bottom,
            ),
            child: widget,
          ),
        );
      },
    );
  }
}

your child widget can have the border radius and colors instead.

open keyboard

closed keyboard