Question 330648 in Flutter Question posted in
The official Flutter documentation can be found here.

Display modal bottom sheet above system navigation bar in flutter

I would like to display a modal bottom sheet above the system navigation bar when using edge-to-edge display.
I mean the system navigation bar and the bottom navigation bar.

Here is how I set up the edge-to-edge display:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
 systemNavigationBarColor: Colors.transparent,
 systemNavigationBarContrastEnforced: false,
 systemNavigationBarIconBrightness: Brightness.dark,
 statusBarColor: Colors.transparent,
 statusBarBrightness: Brightness.light,
 statusBarIconBrightness: Brightness.dark,
));
runApp(ProviderScope(child: App()));

The problem is that when using edge-to-edge the system navigation bar sometimes overlap content on the bottom sheet.
I can’t post any screenshots right because of Failed to upload image; an error occurred on the server, but I would provide them as soon as image upload is working.

Tags:

2

Answers


  1. 0

    Try to wrap the content of the Bottom modal with a SafeArea widget. If it doesn’t work, try to add a bottomPadding like this:

    padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
    Login or Signup to reply.
  2. 0 
    showModalBottomSheet(
            context: context,
            backgroundColor: Colors.transparent,
            elevation: 0.0,
            builder: (context) {
              return Padding(
                padding: EdgeInsets.only(
                  bottom:
                      kToolbarHeight + MediaQuery.of(context).padding.bottom,
                ),
                child: Container(
                  alignment: Alignment.center,
                  color: Colors.cyan,
                  child: const Text("ModalSheet"),
                ),
              );
            },
          );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search