Comment mettre en place une barre de recherche simple avec FlutterFlow

Dans cet article, tu vas apprendre à créer une barre de recherche simple dans FlutterFlow. Cette fonctionnalité te permettra de filtrer une liste d’articles par mots-clés et de réinitialiser la recherche facilement. Nous allons suivre cinq étapes pour y parvenir.

Je veux le clone de ce projet

Étape 1 : Ajouter le local page state

La première étape consiste à ajouter un état local à la page appelé IsShowFullList. Cet état est un booléen qui sera initialisé à true par défaut.

1. Accède aux paramètres de la page.
2. Sélectionne Local Page State.
3. Ajoute un nouvel état local nommé IsShowFullList et définis-le comme un booléen avec une valeur par défaut de true.

Étape 2 : Construire la barre de recherche

Ensuite, nous allons créer la barre de recherche simple en utilisant un Container.

1. Crée un Container.
2. À l’intérieur du container, ajoute une Row.
3. Dans cette Row, inclus un TextField pour la saisie du terme de recherche, un bouton pour déclencher la recherche, et une icône pour réinitialiser la recherche.

Étape 3 : Ajouter l’action simple search

Nous allons maintenant configurer l’action simple search sur le bouton de la barre de recherche simple.

1. Sélectionne le bouton de recherche.
2. Dans le panneau des propriétés, va dans Actions et clique sur Open.
3. Dans l’éditeur d’actions, clique sur + Add Action.
4. Recherche et sélectionne l’action Simple Search.
5. Choisis le type de recherche parmi Firestore Collection, Documents, ou Strings.
6. Configure l’action selon le type de recherche sélectionné :
   • Pour Firestore Collection, sélectionne la collection et les champs recherchables.
   • Pour Documents, définis la variable source et les champs recherchables.
   • Pour Strings, définis la variable source.
7. Dans la section Search Term, lie le TextField où les utilisateurs saisissent leur terme de recherche.
8. Mets à jour l’état IsShowFullList à false après l’action de recherche.

Étape 4 : Afficher le résultat de recherche

Nous devons maintenant afficher les résultats de recherche dans une nouvelle ListView.

1. Ajoute un widget Conditional Builder.
2. Défini la Première Condition sur la variable IsShowFullList.
3. Fais une copie de la ListView existante et place-la dans la section Else.
4. Sur la nouvelle ListView, supprime la requête backend existante.
5. Génére les enfants à partir de la variable Simple Search Results.

Étape 5 : Réinitialiser la recherche

Permettons aux utilisateurs de réinitialiser les résultats de recherche via le bouton de réinitialisation de la barre de recherche simple.

1. Sélectionne l’icône de réinitialisation.
2. Ajoute une action pour mettre à jour la variable d’état IsShowFullList à true.
3. Ajoute une action pour effacer la valeur du TextField.

En suivant ces étapes, tu peux mettre en place une barre de recherche simple dans FlutterFlow, permettant aux utilisateurs de filtrer une liste d’articles et de réinitialiser les résultats de manière efficace. La mise en place d’une barre de recherche simple améliore grandement l’expérience utilisateur en facilitant l’accès rapide aux informations recherchées.