Flutter Material Design Theme Data Part 1

Ein wiederkehrendes Thema bei jeder App ist die Farbgebung. Flutter bietet hier das Prinzip von theme an. D.h. man kann verschiedene Farbwerte, Fonts etc festlegen und später in der App verwenden bzw auf sie zugreifen. Ein theme verwenden wir innerhalb einer MaterialApp. 
Indem wir MaterialApp verwenden erhalten wir Zugriff auf eine Reihe bequemer Möglichkeiten und Funktionalitäten um unsere App zu gestalten. In meinem Post zum Thema Container hatten wir schon einen Beispiel Code:

In ihm entfernen wir nun alle Farbangaben und sehen, das die visuelle Erkennbarkeit der Container eigentlich verschwunden ist. Die Farbe blau, das schwarz für den Text, kommen also aus der Default Einstellung von Flutter. Wenn wir unsere App als MaterialApp aufbauen, haben wir den Eintrag theme: . Ihn können wir auf verschiedene Arten verwenden.

Die generelle Methode

Mit theme:ThemeData.dark(), wenden wir ein Dunkles Theme auf unseren Screen an,  mit theme:ThemeData.light(), ein helles, wobei diese Variante gleichzeitig die Default Variante von Flutter ist. Aber hier eine Auflistung aller vereinfachten Varianten:

• ThemeData.fallback(): Das Default Theme, identisch mit ThemeData.light()
• ThemeData.light(): identisch mit dem Default Theme
• ThemeData.dark(): ein dunkles Theme
• ThemeData.localize(): eine eher spezielle Variante, die ein localTextGeometry Theme und ein baseTheme zusammenführt.
• ThemeData.raw(): eine Variante, welcher wir komplett alle Werte übergeben müssen.

Zuerst die Farben, dann der Code

Color Tool

Bevor wir mit dem Thema weiterfahren, kommen wir zu dem eigentlich wichtigsten Punkt, den Farben. Die Theorie hinter der Farbwahl, und letztendlich Material Design ist umfangreicher als man denken möchte. Wer sich damit beschäftigen will, dem sei material.io empfohlen. Auf dieser Website führt Google aus, wie sich die Firma eine gutes App Design vorstellt.
Teil dieser Website ist das Color Tool, welches vom Konzept her kompatibel mit Flutter ist. Ein weiterer, nicht zu unterschätzender, Vorteil ist, das ein direkter Export zu CodePen möglich ist.
Das ermöglicht ein begutachten der gewählten Farben im Umfeld einer App.

Direkt oder über Farbpaletten

Zurück zu den Farben. Flutter bietet zwei Möglichkeiten an, die direkte Variante oder die Möglichkeiten Farbpaletten zu benutzen. In diesem Post gehen wir auf die direkte Variante ein. Zu der zweiten werde ich einen separaten Post schreiben.
Innerhalb von ThemeData können wir auch eine generelle Aussage über die Brightness machen.
Da wir in unserem Beispielcode ansonsten noch keine Farben gesetzt haben, haben diese Varianten gleiche Auswirkungen, wie die entsprechend ThemeData Varianten.
Hier die zwei Varianten:

• brightness: Brightness.dark : entspricht ThemeData.dark()
• brightness: Brightness.light : entspricht ThemeData.light()
• brightness: Brightness.value: eine sehr spezielle Variante, die man selten benötigt wird

Welchen Nutzwert hat Brightness ? Wenn wir ein Theme definieren, wird es seine Eigenschaften, unsere Farbwahl, weiter vererben. Die Werte die wir nicht explizit ändern, werden von den Default Eigenschaften übernommen. Bei Widgets wie zum Beispiel den Button, beeinflussen wir die Farbwahl des Widgets, mit der Brightness Wahl. Immer vorausgesetzt, wir überschreiben sie nicht direkt im Widget mit einer Farbdefinition. Im Beispiel Code lassen wir aber diesen Wert einmal weg, er spielt in einer anderen Konstellation eine bessere Rolle.

Color Tool benutzen

Im Color Tool habe ich eine Auswahl getroffen, die wir sehr einfach auf unseren Beispiel Code übertragen können. Rechts sehen wir zwei Varianten, Primary und Secondary. Wir können die Werte jetzt sehr einfach in unseren Beispiel Code übertragen. Mit primaryColor: Color(0xff81d4fa) setzen wir die Primary Farbe, und die Varianten nach gleichem Muster. Mit accentColor: Color(0xffe8f5e9) die Secondary Farbe. Was ist aber mit dem Container, wie kann er von unserem Theme profitieren ? Das wiederum geht sehr einfach. Wir erinnern uns , das Theme wird an die Kinder Widgets vererbt, und kann von Ihnen verwendet werden. Der Code:

color: Theme.of(context).accentColor

tut genau das. Er greift auf den Context zu und übernimmt die Farbe. Wir ändern nun alle drei Container in diesem Sinne. Wer experimentieren möchte..hier der Code:

Wer sich für den zweiten Teil interessiert...den findet man hier ! Happy Coding !