Die Statusbar Farbe ändern

Die Statusbar Farbe ändern

Die Farbe der Statusbar zu ändern sollte eigentlich so einfach sein. Aber jedes mal wenn ich dies, egal ob im native Code mit Java und Objective C oder mit Hybrid-Frameworks wie Nativescript oder React Native, versuche, klappt es nicht auf Anhieb wie gewünscht. Leider bildet auch Flutter hier keine Ausnahme. :( Erst nach längerem Googlen bin ich auf folgende Lösungen gestoßen:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.pink, // Farbe der Statusbar
    systemNavigationBarColor: Colors.blue,// Farbe der Navigation-Bar
));

Leider wirkt auch diese Lösung wieder einmal relativ kompliziert. Glücklicherweise gibt es bereits ein pub-Module, das das Ganze extrem einfach macht: https://pub.dev/packages/flutter_statusbarcolor

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
await FlutterStatusbarcolor.setStatusBarColor(Colors.pink);
await FlutterStatusbarcolor.setNavigationBarColor(Colors.orange);

Dazu kannst du dir auch sagen lassen, ob das dark oder light theme für die statusbar leserlicher wäre, indem du dieser Funktion die Farbe deiner Statusbar übergibst.

useWhiteForeground(Colors.white);

Die Funktion returnt true, wenn die Statusbar weiße Icons verwenden soll. Dies kannst du auch gleich mit der Funktion kombinieren, um den Stil der Statusbar zu ändern.

await FlutterStatusbarcolor.setStatusBarWhiteForeground(useWhiteForeground(Colors.white));

Hier sieht man den Unterschied:

Ein Beispielprojekt zum Thema findet ihr hier:

https://github.com/coodoo-io/flutter-statusbar

Toll, was die Flutter-Community so alles schon gezaubert hat! Schade nur, dass dieses Widget nicht Teil des Core-Widget Systems ist.