Safearea not working in showModalBottomSheet

Question

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

Ballyrag

Answer 1

There's a new feature to fix this -- set useSafeArea: true in showModalBottomSheet. https://github.com/flutter/flutter/issues/39205

Sitin

Answer 2

you should get MediaQuery.of(context).viewPadding.top before showModalBottomSheet and pass it to sheet inside, then use EdgeInsets.top inside the sheet.

Mn

This just adds padding to the top of the bottom sheet, which shows even if the bottom sheet doesn't take up the full height of the screen. – Sitin

Answer 3

This would work for you.

showModalBottomSheet<void>(
      context: context,
      isScrollControlled: true,
      backgroundColor: AppColors.transparent,
      builder: (context) {
        final safeAreaPadding = MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top;
    
        return Padding(
          padding: EdgeInsets.only(top: safeAreaPadding),
          child: Container(
            decoration: const BoxDecoration(
              color: AppColors.white,
              borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
            ),
            child: const _YourChild(),
          ),
        );
      },
    );
    
    class _YourChild extends StatelessWidget {
      const _YourChild();
    
      @override
      Widget build(BuildContext context) {
        return Container(height: MediaQuery.of(context).size.height);
      }
    }

Gca

Answer 4

Try this. If it doesn't work, refer this page

showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[...

Iconic

I have tried all the answers on that other question. but the modal still goes behind the status bar – Ballyrag

Answer 5

showModalBottomSheet(
          isScrollControlled: true,
          context: context,
          builder: (context) {
            return MediaQuery(
              data: MediaQueryData.fromWindow(WidgetsBinding.instance.window),
              child: SafeArea(
                child: Column(
                  children: [
                    Row(
                      children: [
                        IconButton(
                          onPressed: () => Navigator.of(context).pop(),
                          icon: const Icon(Icons.close),
                        ),
                      ],
                    ),
                    Expanded(
                      child: ListView.builder(
                        itemBuilder: (context, index) => ListTile(
                          title: Text('Item $index'),
                        ),
                        itemCount: 10,
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        );

Abseil

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Violinist

What the bot means in this case is. that you should just write in your words why this code helps to solve the issue and maybe what was the problem with the original code that this solves – Eisenach