How make the StatusBar transparent for Android in Flutter

Question

I want to make the StatusBar transparent for Android in Flutter but for some reason I am getting black StatusBar on some of the screens. The minimum SDK is 20, targeting SDK 30.

I have tired all the suggestions from here but nothing works: How to hide Android StatusBar in Flutter

Also, I have tried the Flutter package for changing the StatusBar Color:

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.transparent);
    ...
  }
}

And I have tried placing this code on every page:

@override
  initState() {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
    ));
    super.initState();
  }

With the two example codes above I only manage to make the StatusBar color transparent for the splash screen where I also have a background image. Example here:

Once the application loads the StatusBar becomes black:

Even more strange is when I switch trough the application screens, then the text in the StatusBar becomes black as well and remains this way until the application is restarted:

I suppose the black Status Bar can be due to the theme settings or another setting in my app influencing the StatusBar but noting I have tried so far works.

Ideally, I want to make that StatusBar transparent and have the text changing between black and white depending on the background color. It is ok to manually set the transparency and text color as long as it works.

Any suggestions?

You made status bar transparent, since original color was black, so it is shown. This is what is think — p2kr, Jul 12 '21 at 12:48
If the original color was black, it wasn't me who set it. Is the theme setting this by default? Where can I change it? — BradG, Jul 12 '21 at 15:36

score 0 · Answer 1 · answered Jul 13 '21 at 16:21

0

Inside your main.dart file, do this ->

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.red));
  runApp(App(
  ));
}

This way you won't have to write the code in every file.

answered Jul 13 '21 at 16:21

Rahul Mishra

368
3
9

Unfortunately, this has the same effect as placing the code on every page and doesn't work as expected for my app. – BradG Jul 14 '21 at 17:49

score 0 · Answer 2 · answered Apr 20 '22 at 15:24

try this :

main :

void main() async {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.teal,
    statusBarIconBrightness: Brightness.dark,
  ));

appbar :

AppBar(
                title: const Text('promoo'),
                centerTitle: true,
                bottomOpacity: 0,
                elevation: 0,
              ),

score 0 · Answer 3 · answered Apr 20 '22 at 15:57

Try setting the Appbar transparent without any package, and set the default Theme do light.

Since I've never had this problem, my guess is that this should prevent some devices to make the statusbar black out.

void main() {
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
            statusBarColor: Colors.transparent));
  runApp(MyApp());
}

return MaterialApp(
      title: 'MyApp',
      themeMode: ThemeMode.light, //Forcing the ThemeMode could help you
      home: const Home(),
    );

How make the StatusBar transparent for Android in Flutter

3 Answers3