Flutter -- Tutorial Teil 8 TextField Part 3 maxLines

TextField

In den letzten beiden Artikeln haben wir das Thema InputDecoration für TextField's betrachtet.
Auch wenn es dazu noch mehr zu schreiben gäbe, kehren wir in diesem Artikel wieder zu TextField zurück.
Wie schon an anderer Stelle geschrieben, kann das TextField solo auftreten, oder, was häufiger der Fall sein dürfte, im Kontext einer MaterialApp.
Ohne hier ins Detail zu gehen, sollte man im Hinterkopf behalten, das ein TextField außerhalb einer MaterialApp Einschränkungen unterworfen ist. Man sollte sich deshalb vor dem Coden immer fragen, in welchem Kontext soll das TextField stehen. Was passiert mit der Zeichenkette die der Benutzer erfasst und auf was für Situationen, die mit dem TextField direkt in Verbindung stehen, möchte man reagieren.

Linien

Die meisten Text Felder sind ein Linien Felder. Passwort, Vorname, Strasse etc haben in der Regel auf einer Linie Platz. Es kann aber Situationen geben, wo man sich dafür entscheidet dem Benutzer eine andere Anzahl von Linien zur Verfügung zu Stellen.

1 2 3 4 5 6 7

Container( width: 200.0, child: TextField( maxLines: 5, keyboardType: TextInputType.text, ), ),

maxLines

Man sollte den Code oben aber nicht missverstehen ! Mit maxLines: 5 ist nicht gemeint, das nachdem 5 Linien mit Text belegt wurden, keine Texteingabe mehr möglich ist.
Man kann durchaus, eine 6 oder 7 Linie Text schreiben. Auf dem Bildschirm werden aber immer 5 Linien angezeigt !

Wenn man jetzt vor der Frage steht, wie man ein Text Feld mit mehreren Linien in das eigene Layout integriert, ist dieser Umstand ungünstig. Die Eingabe von mehr Text zuzulassen, als man auf dem Bildschirm darstellen möchte macht nicht viel Sinn.

maxLength

1 2 3 4 5 6 7 8

Container( width: 200.0, child: TextField( maxLines: 5, maxLength: 50, keyboardType: TextInputType.text, ), ),

Mit dem Eintrag maxLength: geben wir die Anzahl an Zeichen vor, die der Benutzer eingeben kann. Sowohl beim Code für maxLines, als auch beim Code mit maxLength haben wir ausserdem den Eintrag keyboardType: . Mit diesem Wert legen wir fest, welchen Typ Keyboard wir verwenden möchten. Flutter kennt spezialisierte Varianten, je nach Verwendung:

• .text allgemein für Text
• .datetime für Datum und Zeit
• .multiline für mehrzeiligen Text
• .number für Nummern ohne Dezimalpunkt
• .phone für Telefonnummern 
• .url für Webadressen
• .values für definierte enum Werte
• .numberWithOptions() für spezielle nummerische Werte 

Welchen Keyboard Typ der Entwickler dem Benutzer zur Verfügung stellt, bleibt diesem überlassen. Man sollte aber daran denken, das das Keyboard kein Flutter Element ist, sondern von der Plattform zur Verfügung gestellt wird (Android / iOS) .

style

Natürlich können wir auch Einfluss nehmen, auf das Erscheinungsbild des Textes.Dies geschieht wie auch an anderer Stelle in Flutter über TextStyle. Von importierten Fonts über Farbgebung kennt dieses Widget einige Möglichkeiten den Text zu gestalten.

1 2 3 4 5 6 7 8 9 10 11 12

Container( width: 200.0, child: TextField( maxLines: 5, maxLength: 50, keyboardType: TextInputType.text, style: TextStyle( fontSize: 32, fontFamily: "Anton", ), ), ),

Der Code oben implementiert ein mehrzeiliges Text Feld. Ebenso wird ein Custom Font verwendet, und die Fontgrösse geändert. Das Ergebnis sieht man unten. Das war jetzt noch nicht alles, was es zu TextField zu schreiben gibt. Bis bald !