Flutter -- Tutorial Teil 8 TextField Part 2 InputDecoration 2

Input Decoration
Input Decoration


Beispiel
Im letzten Teil dieser kleinen Serie haben wir uns hintText und hintStyle angesehen. Ein Text also der den Benutzer darüber informiert, was für eine Eingabe wir im Textfeld erwarten. In der Regel verschwindet er, sobald der Benutzer mit der Eingabe einer Zeichenkette beginnt.
Wir haben auch ein Icon eingebunden, das zu Beginn des Textfeldes angezeigt wird. 

labelText


Der labelText: Eintrag im InputDecoration Widget hat eine ähnliche Bedeutung, wie hintText. Man kann, muss nicht, beide einsetzen.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 Container(
              width: 200.0,
               child: TextField(
                 decoration: InputDecoration(
                   labelText: "Benutzername:",
                   hintText: "Username:",
                   icon: Icon(
                     Icons.person,
                   ),
                   hintStyle: TextStyle(
                     backgroundColor: Colors.blue,
                     color: Colors.white,
                   ),
                 ),
               ),
               )

Das Ergebnis sieht dann so aus:


Ob das von der Gestaltung her Sinn macht, muss man selbst entscheiden :-)

Das TextField selbst befindet sich in einem Container(...). Auch hier können wir mit InputDecoration Anpassungen vornehmen:
 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
Container(
              width: 200.0,
               child: TextField(
                 decoration: InputDecoration(
                   labelText: "Benutzername:",
                   hintText: "Username:",
                   filled: true,
                   fillColor: Colors.orange,
                   icon: Icon(
                     Icons.person,
                   ),
                   hintStyle: TextStyle(
                     backgroundColor: Colors.blue,
                     color: Colors.white,
                   ),
                 ),
               ),
               ),

Wenn, wie im Code oben, filled: auf true gesetzt ist, können wir eine Füllfarbe definieren. Wir sehen am Beispiel auch, das dieser Container ziemlich umfangreich ist.

TextField mit Füllfarbe
Im ersten Moment war es das jetzt mit InputDecoration. Ich empfehle die Dokumentation zu lesen, da dieses Widget noch einige Möglichkeiten bietet.
Ich werde darauf zurückkommen, wenn wir uns die Möglichkeiten anschauen, auf Fehler zu reagieren. Bis bald !

Standort: Zürich, Schweiz

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Flutter -- Tutorial Teil 5 Navigator

Bild
Im letzten Teil dieser Serie sind wir auf das Stateful und das Stateless Widget eingegangen. Flutter -- Tutorial Teil 1 Grundsätzliches Flutter -- Tutorial Teil 2 State und Co Flutter -- Tutorial Teil 3 Starter Code   Flutter -- Tutorial Teil 4 StatefulWidget StatelessWidget Flutter -- Tutorial Teil 5 Navigator --  Du bist hier ! Wir erinnern uns: das Stateless Widget ist an sich nicht dazu gedacht Inhalte zu enthalten, auf die wir später direkt zugreifen wollen. Das Stateful Widget unterstützt genau dieses. Ein Großteil von den Möglichkeiten die Flutter bietet, unterstützt uns bei der Erstellung einer Benutzeroberfläche. Diese ermöglicht dem Benutzer z.b. Buttons zu clicken / drücken, Texteingaben zu machen, etwas abzuspeichern. Dabei bestehen die wenigsten Benutzeroberflächen nur aus einem Bildschirm / View, sondern implementieren meistens mehrere Screens, um den Benutzer durch die App zu navigieren. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
Mehr anzeigen

Dart Basic: Strings Part 2

Bild
Im ersten Teil dieser kleinen Serie zum Thema Dart und Strings haben wir ganz einfach begonnen. Wir wissen, wie wir einer Variablen eine Zeichenkette zuweisen können. Wir wissen auch das in Dart alles ein Objekt ist, so auch jede String Variable . Jetzt wollen wir uns aber tiefer in die Materie stürzen ! Eine Problematik die immer wieder auftauchen kann: Ist eine Zeichenkette in einer anderen vorhanden ? contains() Zur Klarstellung: Wir überprüfen nicht, ob zwei Strings identisch bzw gleich sind. Wir testen ob eine Zeichenkette Teil einer oder identisch mit einer anderen Zeichenkette ist. Wie ist das gemeint ? Beispiel contains() Wenn wir uns links den sehr einfachen Code an. test1.contains(..) liefert als Ergebnis ein false , also falsch. ABBC ist nicht Teil der Zeichenkette die wir in der Variablen test1 gespeichert haben. Das ? leitet eigentlich eine if Konstruktion ein. Die Print Funktion nach dem Fragezeichen wird ausgeführt, wenn cont...
Mehr anzeigen

Flutter und JSON

Bild
Wer sich, und wenn es nur oberflächlich ist, mit programmieren befasst wird auf den Begriff JSON stoßen. Wenn man Großmama Google danach fragt, bekommt man von Großvater Wiki diese Definition angeboten: Die JavaScript Object Notation, kurz JSON , ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen. Ein Datenformat ist ein Standard, den sich jemand ausgedacht hat. Wieso und warum ist interessant, aber sekundär. JSON ist ein Datenaustausch Format und ist aktuell im Web weit verbreitet. Viele Quellen mit denen man interagieren kann, bieten ihre Daten in diesen Format an. In aller kürze (ohne ein Tutorial zu JSON ersetzen zu wollen) hier das wichtigste: Der Inhalt eines JSON Files befindet sich entweder zwischen [..] oder {...} Klammern. [...] = Der Inhalt ist eine Liste. Diese Liste kann ein oder mehrere Objekte enthalten. {...} = Der Inhalt ist ein Objekt aus einem oder mehreren Schlüssel/Wert Paaren. Beispi...
Mehr anzeigen