Flutter -- Tutorial Teil 8 TextField Part 1 onChanged

Juni 12, 2019

In den letzten drei Teilen dieses Flutter Tutorials haben wir ein simples Formular erstellt und so schon einige Elemente kennengelernt, die uns Flutter zu diesem Zweck zur Verfügung stellt.

Es wird nun Zeit näher auf das wichtigste von allen einzugehen. Das ist ohne Zweifel das Text Feld, oder in der Flutter Welt: TextField !

Zuerst aber zu einem kleinen, aber wichtigen Unterschied. Flutter kennt TextField und TextFormField. Das zuletzt genannte ist darauf vorbereitet, sich im Kontext eines Formulars zu befinden. Das Formular Konzept von Flutter lässt den Benutzer alle Inputfelder, d.h. Text Felder, Switchboxen, Checkboxen manipulieren. Es ist am Entwickler ein Element festzulegen, welches dann den Validierungsprozess auslöst. Oft ist das ein Button mit ok, senden oder speichern als Text.

TextField ist also die Variante, auf die wir außerhalb eines Formulars zugreifen können. Für das nachvollziehen des Beispiel Codes verwende ich folgende main.dart Datei:

import 'package:flutter/material.dart';
import 'package:tutflutter_002/meine_widgets.dart';

void main()=>runApp(MeinDemo());

class MeinDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Mein Demo",
      theme:ThemeData(
        primaryColor: Colors.black,
      ),
      home: MeineHomePage1(),
    );
  }
}

Auf den Code oben muss ich nicht groß eingehen. MeineHomePage1(...), als Eintrag von body: der MaterialApp, ist leicht ersetzbar. Sollte ich mich das nächste mal einem anderen Thema widmen, kann ich es einfach durch ein neues Widget ersetzen.

Es ist ein guter Rat, sich von Beginn her Gedanken über die Wiederverwendbarkeit von Code zu machen. Schliesslich will man das Rad nicht immer wieder neu erfinden...

class MeineHomePage1 extends StatefulWidget {
  @override
  _MeineHomePage1State createState() => _MeineHomePage1State();
}

class _MeineHomePage1State extends State<MeineHomePage1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          "Mein kleines Demo",
        ),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              
              Container(
              width: 200.0,
               child: TextField(),
               ),
               
               ],
          ),
        ],
      ),
    );
  }
}

Der Code oben enthält ein zentriertes Textfeld, welches in einem Container eingebettet ist. Somit sind alle Grundvoraussetzungen geschaffen, um uns das TextField genauer anzusehen.

TextField

Zuerst das wichtigste. Natürlich wollen wir Text der vom Benutzer eingegeben wird, auch verarbeiten und/oder darauf reagieren.
Die erste Methode die Flutter uns da anbietet, ist eine Reaktion auf Veränderung. Gehen wir einmal davon aus, das Textfeld ist leer zum Start. Dann wäre die erste Veränderung, wenn der Benutzer einen Text in das TextField schreibt. Sollte er sich ein wenig später dazu entscheiden, den Text noch einmal zu abzuändern, ist das die nächste Veränderung.

Container(
              width: 200.0,
               child: TextField(
                 onChanged: (benutzerText){textfeldInhalt = benutzerText;},
               ),
               ),

Oben sehen wir den entsprechenden Code. Dem onChanged: Eintrag des TextField Widgets können wir eine Funktion übergeben, die immer dann ausgeführt wird, wenn sich am Inhalt des Feldes etwas ändert.

Zur Klarstellung:

Eine normale Funktion hat in etwa folgenden Aufbau: meineFunktion(...){...}. Dabei ist meineFunktion der Name der Funktion, gefolgt von Klammern, in welchen wir Pflicht oder optionale Parameter übergeben können. Gleich anschließend, in geschweiften Klammern, der eigentliche Code der Funktion:

meineFunktion(.Pflicht oder optionale Parameter..){...Funktionskörper...}

Auch in anderen Fällen können oder müssen wir bei einem Widget eine Funktion implementieren. Hier im TextField ist klar, was dieser Funktion übergeben wird. Der Inhalt des Textfeldes natürlich.

Da Flutter intern die Übergabe macht, das heisst, den Inhalt des Text Feldes der Variablen zuweisen, ist unser Job hier nur die Namensgebung der Variable. In diesem Beispielcode: benutzerText.
Im Code oben speichern wir den Inhalt des Textfelds in textfeldInhalt. Diese Variable wiederum müssen wir im Vorfeld geschaffen haben.
Da wir ja ein StatefulWidget benützen, müssen wir unseren Beispielcode nur leicht abändern um das zu demonstrieren:

Container(
              width: 200.0,
               child: TextField(
                 onChanged: (benutzerText){
                   setState(() {
                    textfeldInhalt = benutzerText; 
                   });
                   
                   },
               ),
               ),

Der Code oben veranlasst bei jeder Veränderung des Textfeldes ein setState( () {...} ) . Wie wir ja wissen, führt setState zu einem Neuaufbau der betroffenen Widgets, wobei wir innerhalb von setState den Inhalt des Textfelds einer neuen Variablen zuweisen.
Jetzt fügen wir unserer Column(...) noch einen einfachen Text hinzu, der den Inhalt der Variable textfeldInhalt auf den Bildschirm bringt:

1	Text(textfeldInhalt),

Wenn wir den ursprünglichen Code dementsprechenden abgeändert haben, erhalten wir folgendes Resultat:

Das ist lange noch nicht alles zum Thema, mehr dazu im nächsten Post. Bis bald !

Dieses Blog durchsuchen

Flutter, Dart und mehr !