Eindeutigen Benutzernamen sicherstellen

Wenn man in FlutterFlow eine App entwickelt, möchte man sicherstellen, das die Benutzer immer eindeutige Usernamen haben. Vor allem, da das Feld display_name schon fix in der Firebase-User-Collection angelegt ist. Doch wie funktioniert das?

GUI

Zunächst müssen wir dem User das grafische Interface zur Verfügung stellen, damit er den Benutzernamen eingeben kann. Das geht ganz einfach – wir brauchen eigentlich nur 3 Elemente:

• Form: stellt die Validierung sicher;
  • Textfeld: für die Eingabe
  • Button: zum Speichern

Je nach Anwendungsfall gibt es noch einen zurück oder Abbrechen-Button. Das könnte dann so aussehen:

Validierung & Programmierung

Jetzt geht es schon um die Validierung und Programmierung. Gottseidank nimmt uns FlutterFlow hier einiges an Arbeit ab. Aber zu den einzelnen Elementen:

Form

Hier validieren wir das Eingabefeld; es muss etwas eingegeben werden; wir haben Min- und Max-Längen – und wir können sogar als vorgefertigtes Schema „username“ (damit sind keine Sonderzeichen möglich) einstellen:

Eingabefeld

Diesem weisen wir als Initial Value einfach den aktuellen Wert von display_name des aktuell authentifizierten Users zu.

Speichern-Button

So, welche Aktionen passieren, wenn der Button geklickt wird. Kurz zusammengefasst:

1. Ist der eingegebene Benutzername der gleiche wir bisher? > dann können wir einfach alles abbrechen und verlassen die Seite.
2. Existiert der eingegebene Benutzername bereits?
   • Ja: Wir geben eine Meldung als Snackbar aus und warten auf eine neue Eingabe
   • Nein: Wir speichern den neuen Namen, geben eine Meldung aus und verlassen die Seite

Wie sieht das Ganze im Action Flow Editor aus?

Der erste Teil so:

Und der zweite Teil so:

Custom Action

Wie ihr seht, gibt es hier aber eine Condition userNameExists. Dabei handelt es sich um eine Custom Action, der man den neuen Usernamen übergibt und die true zurückliefert, wenn es diesen bereits gibt und false, wenn nicht. Doch wie sieht diese aus?

Future<bool> checkIfUsernameExists(String? displayname) async {
  // check if email is already in the Users-collection

  final QuerySnapshot result = await FirebaseFirestore.instance
      .collection('Users')
      .where('display_name',
          isEqualTo:
              displayname) 
      .get();
  final List<DocumentSnapshot> documents = result.docs;
  return documents.length > 0;
}

Als Parameter nimmt die Action einen String displayname entgegen – und sie liefert boolean zurück.

Disclaimer

Vielleicht ist dies nicht die beste Lösung, aber es funktioniert und vielleicht hilft es ja jemandem, wenn ich das hier poste. Schreibt mir einfach – gerne auch im FlutterFlow-Community-Forum – falls ihr eine bessere Lösung habt 😊😊😊