Numerische Eingabefelder in Flutter

Wenn du eine Flutter-App entwickelst, wirst du oft Eingabefelder (TextFormFields) benötigen, die nur numerische Eingaben erlauben. Ob für eine Telefonnummer, Preise oder andere Zahlenwerte – es ist wichtig, die Benutzerfreundlichkeit durch die richtige Tastatur und Filter sicherzustellen. In diesem Artikel zeigen wir dir, wie du ein numerisches TextFormField erstellst und dabei verschiedene Anforderungen wie negative Zahlen und Dezimalstellen erfüllst.

1. Grundlagen: Tastaturtyp und Eingabeformatierung

Tastaturtyp setzen

In Flutter kannst du den Typ der virtuellen Tastatur, die beim Tippen eines Eingabefelds angezeigt wird, mit der Eigenschaft `keyboardType` festlegen. Um eine Tastatur speziell für Zahlen zu verwenden, setzt du sie wie folgt:

TextFormField(
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
    labelText: 'Numerische Eingabe',
  ),
);

Eingabeformatierung

Um sicherzustellen, dass nur bestimmte Eingaben erlaubt sind, nutzt du `inputFormatters`. Dies sind Listen von Regeln, die auf jede Benutzereingabe angewendet werden. Eine der häufigsten Klassen für Eingabeformatierung ist `FilteringTextInputFormatter`.

TextFormField(
  keyboardType: TextInputType.number,
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
  ],
  decoration: InputDecoration(
    labelText: 'Nur Ganzzahlen',
  ),
);

Mit `FilteringTextInputFormatter.digitsOnly` erlaubst du nur ganze Zahlen ohne negative Vorzeichen oder Dezimalstellen.

2. Komplexere Anforderungen: Negative Zahlen und Dezimalstellen

Manchmal möchtest du flexibelere Eingaben erlauben, wie negative Zahlen oder Dezimalzahlen. Dazu kannst du mit regulären Ausdrücken (`RegEx`) arbeiten.

Variante 1: Ganzzahlen mit Vorzeichen (z. B. -42 oder 42)

Um negative Zahlen zu erlauben, kannst du einen benutzerdefinierten `TextInputFormatter` erstellen:

class SignedNumberFormatter extends TextInputFormatter {
  final RegExp _regex = RegExp(r'^-?\d*$');

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    if (_regex.hasMatch(newValue.text)) {
      return newValue;
    }
    return oldValue;
  }
}

Verwendung:

TextFormField(
  keyboardType: TextInputType.number,
  inputFormatters: [
    SignedNumberFormatter(),
  ],
  decoration: InputDecoration(
    labelText: 'Positive und negative Zahlen',
  ),
);

Variante 2: Dezimalzahlen (z. B. 3.14)

Für Dezimalzahlen kannst du ebenfalls einen eigenen `TextInputFormatter` erstellen:

class DecimalNumberFormatter extends TextInputFormatter {
  final RegExp _regex = RegExp(r'^\d*\.?\d*$');

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    if (_regex.hasMatch(newValue.text)) {
      return newValue;
    }
    return oldValue;
  }
}


Verwendung:

TextFormField(
  keyboardType: TextInputType.numberWithOptions(decimal: true),
  inputFormatters: [
    DecimalNumberFormatter(),
  ],
  decoration: InputDecoration(
    labelText: 'Dezimalzahlen',
  ),
);

Variante 3: Negative Dezimalzahlen (z. B. -3.14)

Wenn du negative Dezimalzahlen zulassen möchtest, kombinierst du die Logik aus den vorherigen Varianten:

class SignedDecimalNumberFormatter extends TextInputFormatter {
  final RegExp _regex = RegExp(r'^-?\d*\.?\d*$');

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    if (_regex.hasMatch(newValue.text)) {
      return newValue;
    }
    return oldValue;
  }
}


Verwendung:

TextFormField(
  keyboardType: TextInputType.numberWithOptions(decimal: true),
  inputFormatters: [
    SignedDecimalNumberFormatter(),
  ],
  decoration: InputDecoration(
    labelText: 'Negative Dezimalzahlen',
  ),
);

Fazit

Das Arbeiten mit numerischen Eingabefeldern in Flutter ist nicht schwer, wenn man die richtigen Werkzeuge kennt. Mit der Kombination aus `keyboardType` und benutzerdefinierten `TextInputFormatters` kannst du sicherstellen, dass nur gültige Eingaben gemacht werden.

Hier eine kurze Zusammenfassung:

- Verwende `TextInputType.number` oder `TextInputType.numberWithOptions` für die richtige Tastatur.

- Nutze `FilteringTextInputFormatter` für einfache Eingabeformatierung.

- Erstelle benutzerdefinierte `TextInputFormatter`, um komplexere Eingabemuster zu ermöglichen, wie negative oder Dezimalzahlen.

Mit diesen Techniken kannst du deine Eingabefelder flexibel gestalten und die Benutzererfahrung verbessern. Experimentiere mit den Varianten und integriere sie in dein nächstes Flutter-Projekt!

Zum Schluß haben wir noch ein komplexes Beispiel für euch wo ihr euch den ganzen Code anschauen könnt.