Boehrsi.de - Blog

Es gibt wieder neues von mir aus der Flutter Welt. Meine App Tessa hat ein Update erhalten. In dieser Version fügte ich einen Dark Mode und anpassbare Kategorien hinzu. Natürlich wurden auch diverse Fehler behoben und einige Anpassungen an der UI vorgenommen. Letzteres sorgt vor allem für einen modernen Look im Bereich der Snackbars. Ebenfalls verbessert wurde die Performance.
Im Rahmen des Updates habe ich das erste Mal mit Flutter in Verbindung mit einem dedizierten Dark Mode gearbeitet und ich bin durchaus zufrieden. Generell musste ich lediglich mein allgemeines Theme in ein helles und ein dunkles aufteilen und der Großteil war geschafft. Natürlich muss man sich dann noch um eventuelle manuelle Einstellungen kümmern, aber extrem vieles lief einfach so. Selbst UI die von Third Party Libraries gebaut wird, konnte bis auf kleine Ausnahmen ohne Änderungen verwendet werden. Hier merkt man das Flutters Material Komponenten alle aus einem Guss kommen.
Bedenken sollte man allerdings auch die nativen oder statischen Komponenten. In diesem Bereich habe ich vor allem kleinere Anpassungen an den genutzten Bildern vorgenommen und den initialen Splash Screen angepasst. Hierfür habe ich innerhalb von Android selbst die gegebenen Möglichkeiten genutzt. Da zu diesem Zeitpunkt Flutter selbst noch nicht aktiv ist, ist der Splash Screen immer gemäß des System Themes gesetzt und manuelle App Einstellungen greifen dann nachdem der Flutter Kontext geladen ist.

Falls auch ihr Anpassungen in diesem Bereich machen wollt, empfehle ich euch zu erst den aktuellen Flutter Splash Screen Guide open_in_new abzuarbeiten. Danach habt ihr einen Splash Screen in eurer App, welcher in einer Drawable XML Datei definiert ist. Das darin genutzte Bild sollte nach Möglichkeit im hellen und dunklen Theme genutzt werden können. Sobald dies der Fall ist könnte ihr einfach eine eigene dynamische Hintergrundfarbe in der Drawable XML Datei nutzen.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/background" />
    <item
        android:drawable="@drawable/splash"
        android:gravity="center" />
</layer-list>

In meinem Beispiel ist diese Hintergrundfarbe @color/background. Diese wird nun basierend auf dem Theme angepasst. Dafür definiert in euren Color-Dateien den Wert, sowohl für die helle, wie auch für die dunkle Version. Die Dateien müssen an folgenden Stellen vorhanden sein, bzw. erstellt werden.

• android/app/src/main/res/values/colors.xml
• android/app/src/main/res/values-night/colors.xml

Der Inhalt der Dateien sieht dann wie folgt aus.

Helles Theme

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="background">#FAFAFA</color>
</resources>

Dunkles Theme

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="background">#303030</color>
</resources>

Mit diesen Anpassungen ist lediglich eine einzige Farbe zu ändern, sofern ein Wechsel des Themes stattfindet. Das Ganze ist einfach wartbar und zugleich gemäß den Android Vorgaben umgesetzt. Bei all diesen Informationen sollte man allerdings im Kopf haben, dass ab der nächsten Android Version einige Änderungen am Splash Screen Verhalten open_in_new vorgenommen werden und sich entsprechend auch in der Flutter Welt einige Dinge ändern. Dazu gibt es mehr im offiziellen Flutter Guide open_in_new zum Thema Splash Screen.