flutter full screen using SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky); not working correctly

Question

Trying to set app as full screen using SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky); it hides the bottom navigation bar but is inconsistent sometimes a white space appears at the bottom, and the top status bar part is just a black space always

void main() async {
 await setupServiceLocator();
 WidgetsFlutterBinding.ensureInitialized();

 await SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

   runApp(ProviderScope(child: DevicePreview(
      enabled:false,//!kReleaseMode,
      builder: (context) => MyApp())));
}

how to resolve this ? already tried <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item> in the styles.xml file but no change.

Answer 1

You can try my code, it is worked for me https://i.stack.imgur.com/YfE6y.png

  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
      overlays: [SystemUiOverlay.top]);
  SystemChrome.setSystemUIChangeCallback((systemOverlaysAreVisible) async {
    _debouncer.run(() {
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
          overlays: [SystemUiOverlay.top]);
    });
  });

  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: AppColors.transparent,
    statusBarBrightness: Brightness.light,
    statusBarIconBrightness: Brightness.light,
    systemNavigationBarColor: AppColors.transparent,
    systemNavigationBarDividerColor: null,
    systemNavigationBarIconBrightness: Brightness.light,
  ));