Flutter -- Tutorial Teil 8 TextField Part 2 InputDecoration 2
 |
| 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 |
Ich werde darauf zurückkommen, wenn wir uns die Möglichkeiten anschauen, auf Fehler zu reagieren. Bis bald !
Kommentare
Kommentar veröffentlichen