Flutter Status Bar transparent

Question

How can I make the status and the option bar (on the bottom) transparent?

I tried many thinks but its still black with white text

Here is the code that I already implemented:

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
...
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      systemStatusBarContrastEnforced: true,
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
      systemNavigationBarDividerColor: Colors.transparent,
      systemNavigationBarIconBrightness: Brightness.light,
      statusBarIconBrightness: Brightness.light));

  
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge,
      overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom]);
...

runApp(...)

and in my Material app:

return MaterialApp.router(
      theme: ThemeData(
        appBarTheme: AppBarTheme(
            //systemOverlayStyle: SystemUiOverlayStyle.light,
            backgroundColor: Colors.transparent),
      ),
      color: Colors.transparent,
...

I know that AppBar and status bar is not the same (just wanted to include it anyway). Thanks so much in advance.

UPDATE:

I tried to remove the Safearea, who apparently conflicted with the status and navigation bar. It resulted in this:

As now its still not really transparent and also the bottom is messed up. Any ideas?

score 4 · Answer 1 · answered Mar 10 '22 at 09:12

4

I recently struggled with this too.

My Solution was

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.light
));

In my case, safearea was interfering with the changes which made it still show black with white text. I would advice you test on a physical device too.

answered Mar 10 '22 at 09:12

Frank nike

330
5
12

Thanks! It helped a little bit (check out Updated version of the question) but its still not working. – Caspar Bm Mar 15 '22 at 14:59

score 3 · Accepted Answer · answered Mar 15 '22 at 15:07

As Frank Nike suggests, the SafeArea widget conflicts with the

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.light
));

Therefore, what solved the problem for me was removing the SafeArea completely and setting:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
      overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom]);

score 1 · Answer 3 · answered Mar 09 '22 at 22:23

Assuming hiding is ok:

import 'package:flutter/services.dart';

Hide Everything:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);

Hide only bottom:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
  SystemUiOverlay.bottom
]);

Bring them back:

  @override
  void dispose() {
    super.dispose(); 
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values);  // to re-show bars
  }

credit to this answer.

Flutter Status Bar transparent

3 Answers3