Flutter -- Tutorial Teil 7 Form Part 1 TextFormField

Formulare

Manchmal scheint es so, als seien sie allgegenwärtig: Formulare ! Aber seien wir ehrlich, ohne geht es nicht. Ob ein Log In oder bei der Erfassung von Benutzerdaten. Wir brauchen die Möglichkeit Daten geordnet zu erfassen, ob das nun am Bildschirm ist, oder auf einem Blatt Papier.

Natürlich bietet hier Flutter auch Unterstützung an. Ein typisches Formular am Bildschirm besteht oft aus Textfeldern, Checkboxen und eventuell Dropdown Listenfeldern. Dieser Artikel wird seinen Fokus auf das Textfeld legen.

Um mit einer Form umzugehen brauchen wir einen State in unserem Code. Für unseren Beispielcode muss es nicht gleich die Implementation von Provider oder BloC sein, ein StatefulWidget erfüllt hier seinen Zweck auch.

Vorneweg etwas zu der Organisation der Files. Wenn man sich in Flutter einarbeitet und das bevorzugt mit Beispielcode macht, ist man geneigt immer wieder neue Projekte zu erstellen. Das geht natürlich auch, wird mit der Zeit aber unübersichtlich und schwierig zu verwalten. Eine andere Möglichkeit ist, im main.dart File nur den Start Up Code zu belassen und die Beispiele in einem separaten File, als Widgets zu organisieren. Wenn man sich dann noch angewöhnt, das was einem wichtig scheint gut zu kommentieren, erhöht das den Nutzen und die Verfügbarkeit enorm.

Start Up Code:

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: MeineHomePage(),
    );
  }
}

Der Start Up Code ist simpel: Wir importieren material.dart, lassen uns eine MaterialApp retournieren, wobei wir einen title: und eine Farbe (ThemeData) mit über geben.
Als home: Eintrag rufen wir ein Widget auf, welches wir im meine_widgets.dart gespeichert und ebenfalls importiert haben.

Flutter Form Widget

Als generellen Behälter für unser Formular bietet uns Flutter das Form Widget an. Mit ihm verbinden wir weitere Widgets die wir für das Formular benötigen. Da wir auf Eingaben in ein Formular reagieren möchten, brauchen wir ein StatefulWidget und wir benötigen einen Schlüssel, Key.
Diesen Schlüssel kann mit dem id Attribut in Html vergleichen, wo zum Beispiel ein div Element ein id Element haben kann. Zum Code:

class MeinFormular extends StatefulWidget {
  @override
  _MeinFormularState createState() => _MeinFormularState();
}

class _MeinFormularState extends State<MeinFormular> {

  final _formKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dein Profil",
        ),
      ),
      body: Container(
        child: Builder(
          builder: (context)=>Form(
            key: _formKey,
            child: Container(
              child: TextFormField(
                decoration: InputDecoration(
                  labelText: "Vorname:",
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Das was am Code oben zuerst auffällt ist _formKey. Hier definieren wir den Schlüssel über den Aufruf der GlobalKey Funktion. Im späteren Verlauf dieser Artikel Serie werde ich noch darauf eingehen.
Die nächste Auffälligkeit ist die Builder(...) Funktion.Wir erinnern uns: Flutter organisiert die Widgets in einer Baumstruktur. Der aktuelle context enthält dabei die Daten dieser Struktur und wird mit der build Methode von dem Framework als BuildContext Parameter automatisch an das neu zu erstellende Widget übergeben.

Der wichtige Punkt dabei ist, das unser Formular im Beispiel oben, über eine Funktion in den Container integriert wird. Zu dem Zeitpunkt, wo diese Funktion aufgerufen wird, ist die build(...) Methode noch nicht abgeschlossen und somit ist der context von Scaffold auch noch nicht vorhanden. Und selbstverständlich, was noch nicht vorhanden ist, kann auch nicht an unser Form Widget weitergegeben werden.

In unserem Beispiel Code haben wir also das Builder(...) Widget, welches einen Eintrag builder: hat. Dieser Eintrag enthält unsere "eigene" build Funktion, die den aktuellen context, den gleichen wie bei Widget build.. , als Parameter mit auf den Weg bekommt.
Anschliessend wird das Form(...) Widget implementiert, welches key: für den Schlüssel, child: für den Container(...), als Eintrag hat.

Wenn wir im nächsten Artikel das Beispiel ausbauen, werden wir den Container ersetzen. Bekanntlich hat er ja "nur" einen Child Eintrag. Für ein Formular aber wäre Children besser oder ?
Bis Bald !

Dieses Blog durchsuchen

Flutter, Dart und mehr !