Material Design in Flutter Teil 2

Im ersten Teil des Posts zu diesem Thema, haben wir ein kleines Programm geschrieben, das einige "Material Design Elemente" von Flutter auf den Bildschirm (Emulator) bringt. Im zweiten Teil des Posts gehen wir nun ein wenig mehr auf die Möglichkeiten ein, die Material Design bietet.

Farben

Wer in seinem Flutter Projekt Farben direkt definieren will, kann diese als ARGB werte festlegen. Hier ein Beispiel:

0xff42f4dc

Die obige Zeichenkette beginnt mit 0x und definiert, das die Zeichenkette als Hexadezimal Wert zu verstehen ist. ff, ist der Wert für den Alpha Kanal der Farbe. Dieser legt die Transparenz der Farbe fest. In diesem Beispiel ist der Wert 255, was nichts anderes heißt, als das die Farbe zu 100% sichtbar ist. Geringere Werte lassen die Hintergrundfarbe durchscheinen bzw mischen "unsere" Farbe mit der Hintergrundfarbe. 42 legt den Rotanteil fest, f4 den Grünanteil, dc, den Blauanteil fest. Kompakt:

1. 0x = es handelt sich um eine Hexadezimal Zeichenkette
2. ff = der Wert des Alpha Channels ist 255
3. 42 = der Rotanteil der Farbe
4. f4 = der Grünanteil der Farbe
5. dc = der Blauanteil der Farbe

Als erstes ergänzen wir den Code von Teil 1 um ein Farben File. Diese Vorgehensweise ist oft nützlich. So können wir die Farbwerte auch in anderen Files der App mit "import" einfach einbinden.

Eine Material App hat ein Standard, oder Englisch, ein Default Theme. Im Falle von Flutter ist die primäre Farbe, wenn wir nichts ändern, ein Blauton. Flutter verfügt aber in einer Material App über fix eingebaute Varianten dieses Standard Theme's.

Der Material App können wir nicht nur Werte, wie einen Titel oder ein "home:" übergeben, sondern auch das Standard Theme ganz einfach ändern.

Mit ThemeData.dark() wechseln wir das Erscheinungsbild der App auf dunkel und mit .light natürlich auf hell. 

Wenn wir aber mit eigenen Farben arbeiten möchten, müssen wir sie zuerst aussuchen. Webseiten, wie materialpalette.com oder Random Material Generator, machen das einem einfach.

const meinePrimFarbe = const Color(0xff42f4dc);

Mit meinePrimFarbe haben wir eine Farbkonstante definiert, indem wir Color() einen Hexadezimalwert übergeben. Color() retourniert eine Konstante, die wir nun innerhalb der App benutzen können.

Um mit den Farben zu arbeiten setzen wir eine Funktion ein. In dieser wird zuerst das "helle" Standard Theme als Grundlage genommen und in der Variable basisTheme gespeichert. Mit der Funktion .copyWith() können wir jetzt die Farben ändern, welche wir möchten. Alle nicht geänderten Farben bleiben so, wie im Standard Theme definiert. Beim konzipieren der App ist es wohl ein guter Rat, sich schon im Vorfeld Gedanken über die Farbgebung zu machen. Bei professionellen Software Entwicklungen dürfte dieser Part wohl die Aufgabe des Designers sein. Das Color Tool auf Material.io erlaubt einen Export zu CodePen. Diese Seite gibt einen guten Überblick, wie eine gewählte Farbkombination wirken würde.

Zu guter Letzt hier noch der angepasste Quellcode: