Textfelder mit Dezimalzahlen

Das Eingeben, Speichern und Anzeigen von Dezimalzahlen in Textfeldern in FlutterFlow kann ein bisschen herausfordernd sein. So wird beispielsweise ein Komma nicht als Dezimaltrenner akzeptiert; wenn man den Eingabefilter setzt, funktioniert dieser nicht ganz und auch die Anzeige der Zahl benötigt ein spezifisches Format. Ich habe hier die Best-Practice für mich zusammengetragen, mit Lösungen zu diesen Herausforderungen.

Eigenschaften des Textfelds

Um das Textfeld für Dezimalzahlen zu verwenden, setzen wir folgende Eigenschaften:

KeyboardType

Dieses setzen wir auf „Number (with decimals)“. Dies zeigt dann das benötigte Eingabefeld an.

Das zeigt folgendes Keyboard an:

Filter

Der Filter gibt an, welche Zeichen für die Eingabe akzeptiert werden.

Für Dezimalzahlen gibt es keinen fertigen, d. h. wir wählen „Custom Regexp“ und geben folgenden Wert ein:

^[\d.,]*$

Dies stellt sicher, dass nichts außer Zahlen, einem Punkt und einem Komma akzeptiert wird.

Initial Value

Damit eine Kommazahl richtig angezeigt wird, setzen wir beim Initial Value ein spezifisches Zahlenformat: #,##0.00 mit der Locale de_DE.

Da wir außerdem möchten, dass statt einer „0“ ein „-“ angezeigt wird, falls es das Feld in der Datenbank gar nicht gibt, wrappen wir das Ganze in eine IF/THEN-Abfrage, die überprüft, ob der zu ladende Wert größer 0 ist. Wenn nicht, wird ein leerer String zurückgegeben, den ein Zahlenfeld als „-“ anzeigt:

Speichern eines Werts

Nun geht es darum, den Wert des Textfelds zu speichern. Ob ihr diese Aktion bei Klick auf einen Button, bei Änderung oder bei Fokusänderung ausführt, bleibt euch überlassen.

Zunächst sollten wir sicherstellen, dass der Wert aus der Datenbank gelöscht wird, wenn der User das Feld löscht. Daher beginnt die Speichern-Aktion mit einer Abfrage, ob das Feld leer ist.

Wenn ja, wird das Feld aus dem Dokument gelöscht.

Interessant wird es aber, wenn sich eine Zahl in dem Feld befindet: Standardmäßig kann FlutterFlow nämlich nicht mit „,“ als Komma umgehen.

Das können wir dadurch umgehen, dass wir vor dem Speichern den Wert des Feldes durch eine Custom Function schicken, die das rechteste Komma in einen Punkt umwandelt – und gleichzeitig auch alle anderen Zeichen, die nicht Buchstaben sind, aus dem String herauslöscht. Diese verwenden wir zum Speichern des Werts:

Zu guter Letzt noch die Info, wie diese Custom Function fixWrongComma aussieht.

double? fixWrongComma(String? textfieldString) {
  /// MODIFY CODE ONLY BELOW THIS LINE

  if (textfieldString == null) return null;

  bool foundDecimal = false;

  // Initialize an empty string to accumulate characters
  String result = '';

  // Iterate through the string from right to left
  for (int i = textfieldString.length - 1; i >= 0; i--) {
    if ((textfieldString[i] == ',' || textfieldString[i] == '.') &&
        !foundDecimal) {
      result = '.' + result; // Replace comma with period
      foundDecimal = true;
    } else if (RegExp(r'\d').hasMatch(textfieldString[i])) {
      result = textfieldString[i] + result; // Append digit to result
    }
  }

  // Parse the string result into a double
  return result.isEmpty ? null : double.tryParse(result);

  /// MODIFY CODE ONLY ABOVE THIS LINE
}

Und hier der Parameter bzw. der Return-Value:

So können Textfelder auch im deutschsprachigen Raum verwendet werden 😊