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

hide statusbar in flutter

When I want to hide the status bar, it gets hidden but a black bar takes its place. How can I fix this?

‘

void main()async {

  runApp(MyApp());
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
}

”’

and I use all of these feilds :

”’

SystemUiMode.immersive
SystemUiMode.immersiveSticky
SystemUiMode.edgeToEdge
SystemUiMode.leanBack
SystemUiMode.manual , overlays: []

”’

Tags:

3

Answers


  1. 0

    as weird as it is, you need to wrap your page with SafeArea.

    body: SafeArea(
  top: false,
  bottom: false,
  left: false,
  right: false,
  maintainBottomViewPadding: true,
  child: child,
),
    Login or Signup to reply.
  2. 0

    Consider this as your cheat sheet:

      // Visible Status Bar & Bottom Navigation Bar Both
  await SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.manual,
    overlays: <SystemUiOverlay>[SystemUiOverlay.top, SystemUiOverlay.bottom],
  );

  // Hide Status Bar & Bottom Navigation Bar Both
  await SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.manual,
    overlays: <SystemUiOverlay>[],
  );

  // Hide Status Bar & Visible Bottom Navigation Bar
  await SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.manual,
    overlays: <SystemUiOverlay>[SystemUiOverlay.bottom],
  );

  // Hide Bottom Navigation Bar & Visible Status Bar
  await SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.manual,
    overlays: <SystemUiOverlay>[SystemUiOverlay.top],
  );
    Login or Signup to reply.
  3. 0

    Just wrap your Scaffold with the ColoredBox (or Container) widget and provide the color you want.
    This should be the outermost widget.

    eg:

    return ColoredBox(
   color: Colors.white,
   child: SafeArea(
     child: Scaffold(),
   ),
);

    return ColoredBox(
   color: Colors.white,
   child: Scaffold(),
);

    or

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search