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_ns

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

Ich zeige dir ein Beispiel, wie man den Code in die Standart Beispiel App von Flutter einbinden könnte, damit sich die Farben direkt beim Start der App ändern. Füge hierfür die folgenden Zeilen oberhalb der überschriebenen build-Methode ein:

  
  @override
  initState() {
    _changeColor();
    super.initState();
  }

  Future _changeColor() async {
    await FlutterStatusbarcolor.setStatusBarColor(Colors.pink);
    await       
    FlutterStatusbarcolor.setNavigationBarColor(Colors.orange);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      ...
      

Damit ändern sich die Farben der Statusbar und der Navigationbar wie folgt:

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.