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.
