How do I turn off status bar Flutter?

To turn off or hide the status bar in Flutter, the most effective and modern approach is to use the SystemChrome class to control the system UI overlays. This allows you to set specific UI modes, such as making the application run in full-screen or manually defining which system overlays should remain visible.

How Do I Turn Off Status Bar Flutter?

You can turn off the status bar in Flutter primarily by using the SystemChrome.setEnabledSystemUIMode method to control the visibility of system UI overlays. This is crucial for creating immersive experiences or when you need your app to occupy the entire screen.

Understanding `SystemChrome.setEnabledSystemUIMode`

The SystemChrome.setEnabledSystemUIMode method is part of the services package and allows you to set the system UI mode. It takes two main parameters:

mode: This specifies the desired system UI behavior, such as SystemUiMode.manual, SystemUiMode.immersive, or SystemUiMode.edgeToEdge.
overlays: When mode is set to SystemUiMode.manual, this optional list of SystemUiOverlay enums allows you to explicitly define which system overlays (like the status bar or navigation bar) should remain visible.

Methods to Hide the Status Bar

Here are the common ways to hide the status bar in Flutter:

1. Hiding Both Status and Navigation Bars (Full Screen)

To hide both the status bar and the navigation bar for a fully immersive experience, you can use SystemUiMode.immersive or SystemUiMode.manual with an empty overlays list.

Using SystemUiMode.immersive: This mode hides both the status and navigation bars. Tapping the screen brings them back temporarily.

import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized(); // Ensure Flutter is initialized
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive); // Hide both bars
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Full Screen App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Hidden Status Bar')),
        body: const Center(
          child: Text('This screen has no status or navigation bar!'),
        ),
      ),
    );
  }
}

Using SystemUiMode.manual with empty overlays: This provides similar behavior to immersive but gives you explicit control.

import 'package:flutter/services.dart';
// ... other imports

SystemChrome.setEnabledSystemUIMode(
  SystemUiMode.manual,
  overlays: [], // No overlays should be visible
);

2. Hiding Only the Status Bar (Keeping Navigation Bar Visible)

If you want to hide just the status bar but keep the bottom navigation bar visible, you can set the system UI mode to manual and specify that only the SystemUiOverlay.bottoms (which corresponds to the navigation bar) should remain visible.

import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // Set system UI mode to manual and specify that only bottom overlays (navigation bar) should be visible.
  SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.manual,
    overlays: [SystemUiOverlay.bottoms], // Keeps the navigation bar visible
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'No Status Bar',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Status Bar Hidden')),
        body: const Center(
          child: Text('Only the status bar is hidden here.'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            ),
          ],
        ),
      ),
    );
  }
}

3. Hiding Only the Navigation Bar (Keeping Status Bar Visible)

While the question is about the status bar, for completeness, if you wanted to hide only the navigation bar:

import 'package:flutter/services.dart';
// ... other imports

SystemChrome.setEnabledSystemUIMode(
  SystemUiMode.manual,
  overlays: [SystemUiOverlay.top], // Keeps the status bar visible
);

When and Where to Apply These Changes

main() function: For a global, application-wide full-screen experience from the start. Remember to call WidgetsFlutterBinding.ensureInitialized(); before SystemChrome calls in main().

initState() of a specific widget: If you want to apply the full-screen mode only for a particular screen. Make sure to reset the UI mode in dispose() if you want the status bar to reappear when leaving that screen.

@override
void initState() {
  super.initState();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
}

@override
void dispose() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge); // Reset to default
  super.dispose();
}

Summary of `SystemUiMode` Options

`SystemUiMode` Option	Description	Effect on Status/Navigation Bars
`immersive`	Hides both status and navigation bars. Tapping the screen brings them back.	Both hidden
`immersiveSticky`	Similar to `immersive` but less intrusive, bars disappear after a short delay.	Both hidden, reappear briefly
`edgeToEdge`	Expands the app to draw under the system bars, which remain semi-transparent.	Both visible (transparent)
`manual`	Gives explicit control over which `overlays` (top/bottom) should be visible.	Customizable
`leanBack`	Hides navigation bar, keeps status bar. Swiping from screen edge reveals the bar.	Navigation hidden, status visible

Further Customization with `AnnotatedRegion<SystemUiOverlayStyle>`

While SystemChrome.setEnabledSystemUIMode hides the status bar, you can also style its appearance (e.g., icons, text color) when it is visible using AnnotatedRegion<SystemUiOverlayStyle>. This doesn't hide it but changes its look to blend with your app.

import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

// ... Inside a Widget's build method or a custom widget

Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, // Make status bar transparent
      statusBarIconBrightness: Brightness.dark, // Dark icons for light background
      statusBarBrightness: Brightness.light, // iOS: dark background for light status bar
    ),
    child: Scaffold(
      appBar: AppBar(title: const Text('Styled Status Bar')),
      body: const Center(
        child: Text('This screen has a styled, but visible, status bar.'),
      ),
    ),
  );
}

By utilizing SystemChrome.setEnabledSystemUIMode and understanding its various modes and overlays parameters, you can precisely control the visibility of the status bar and other system UI elements in your Flutter application.

How do I turn off status bar Flutter?