flutterflutter-showmodalbottomsheetedge-to-edge

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.

Solution

  • 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),