FlutterFlow Docs
Search…
Simple Search
The simple search allows you to search the data present locally on a device. For example, you could search from the list of strings (stored in a variable) and from the Firestore collection and documents already retrieved on the user's device or displayed on the screen.
We advise using a simple search only for the smaller Firestore collection (with limited records). Otherwise, it can be slow and/or expensive. For a more extensive collection, consider using the Algolia search.
Simple search demo

Before you add a simple search, you need to display some data on the screen. The data is usually a list of items from the Firestore collection, a list of Firestore documents, or a list of strings. The list of items can be displayed using any scrollable view such as ListView. Let's see how to populate the list of items and search from the Firestore collection, a list of Firestore Documents, and a list of Strings.
If you have already retrieved a list of items, you can skip to the adding simple search.
Search from Collection
Search from Documents
Search from a list of Strings
To search from collection:
Pro tip: To get the list documents, you need a query on top level widget such as Page or Column.
To search from a list of documents:
  • Now, create/select a page and give it a name.
  • Add the ListView, and then inside the ListView add the ListTile widget.
  • To be able to search a document, you need a list of documents. The list of documents can be retrevied by querying a collection. For adding simple search scenario, the ideal place to query a collection is any top level widget such as Page or Column widget (and NOT the ListView). To query collection on a page:
    • Select the page and then click on the Backend Query tab (on the right side of your screen).
    • Set the Query Type to Query Collection.
    • Scroll down to find the Collection dropdown and set it to your collection.
    • Set the Query Type to List of Documents.
    • Click Save.
  • Now you can store the list of documents (retrieved at page level) in variable and use it to populate the ListView. This can be done by generating the dynamic children. To do that:
    • Select ListView from the widget tree or from the canvas area.
    • Click on the Generate Dynamic Children tab (on the right side of your screen).
    • Enter the appropriate Variable Name.
    • Set the Source value to the collection_name Records (from PageName).
    • Click Save.
  • To display data in UI element:
    • Select the ListTile Widget from the widget tree or from the canvas area.
    • Move to property editor and scroll down to the Title section and click on the Set from Variable text. (This will open a new panel)
      • Find the Source dropdown, click on unset, and select the dynamic_children_variable_name item (Document(collection_name)) from the list.
      • Under the Available Options, click on Unset and select the field that you wish to show.
      • Click Save.
Showing list of items from Firestore Documents
To search from a list of Strings:
  • The list of strings can be stored and retrieved from the local state variable. See how to prepare a list of string.
  • Now to display list of items in ListView:
    • Create/Select a page and give it a name.
    • Add the ListView, and then inside the ListView add the ListTile widget.
    • Select ListView from the widget tree or from the canvas area.
    • Click on the Generate Dynamic Children tab (on the right side of your screen).
    • Enter the appropriate Variable Name.
    • Set the Source value to the Local State.
    • Set the Available Options to the variable name that holds the list of Strings.
    • Click Save.
    • A popup will open. Click Ok.
  • To display data in UI element:
    • Select the ListTile Widget from the widget tree or from the canvas area.
    • Move to property editor and scroll down to the Title section and click on the Set from Variable text. (This will open a new panel)
      • Find the Source dropdown, click on unset, and select the dynamic_children_variable_name item (datatype) from the list.
      • Set any default value if you wish to.
      • Click Save.
Showing list of items from a list of Strings

The steps to add a simple search are as follows:
This section requires that you have list of items already retrieved. If not, check out how to search.

1. Add local state variable

The idea here is to show the full list at first and then use the new/separate list view to display the search result. Adding the local state variable helps you determine whether to show the original list (i.e all items) or the list with a search result.
To add a local state variable:
  • Click on the Local State (
    ) from the Navigation Menu (left side of your screen).
  • Click on the + Add State Variable. A popup will open.
    • Inside the field_name box, enter the name of the variable (e.g. showFullList).
    • Click on the dropdown list below (already selected with String) and select the Boolean Data Type.
    • Click Create.
  • Once the local state variable is created, set the default value to True by checking the variable name under the Default Value.
Adding local state variable
To build the search bar quickly, you can use the ready-made templates and add a button to clear the search result.
Here's how you can add a search bar from templates:
  • Select the page.
  • Click on the UI Builder from the Navigation Menu (left side of your screen).
  • Select the Templates section.
  • Drag the UI Inputs - Search Bar and drop it inside the Column widget. The top widget of this component is the topCard.
  • Select the topCard widget and set its Padding to 10 on all sides.
  • Inside the topCard, select the Row widget and add the IconButton widget.
  • Select the IconButton, change its icon to cancel_outlined, and set its Button Size to 40 and Icon Size to 20.
Building search bar

3. Adding search action

Add the search action by visiting the following page.
Pro tip for adding simple search action on Firestore Documents: The action for adding simple search must be inside the widget you are doing the query on (query on Firestore collection). For example, while adding the search action on a Button widget, make sure you querying the Firestore collection on any of its parent widget such as Page or Column.

4. Update Local Sate variable

After adding the search action, chain the next action to update the local state variable (that you created in step 1).
To update the local state variable:
  • Click on the + button at the bottom of the box and select Add Action.
  • On the right side, search and select the Update Local State action.
  • Set the Select field to update to the Local State variable name.
  • Set the Select Update Type to the Set Value.
  • Set the Value Source to Specific Value.
  • Set the Value to False. This is because we want to hide the original list and display the list with the search result.
  • Click Close.
Update Local Sate variable

5. Showing search results in a ListView

The simple search action returns the search result, which you need to display on a new/separate list view. To save time, you can simply copy-paste the existing ListView and show data from the search result.
Here's exactly how you do it:
  • Copy the existing ListView and paste it inside the Column. Make sure that the new ListView is just below the existing one.
  • Select the new ListView.
    • If you are adding a search on Firestore collection, Move to the property editor, select the Backend Query section and then Remove the existing query.
    • If you are adding a search on Firestore documents, Move to the property editor, select the Generate Dynamic Children and Remove the existing variable.
  • Select the Generate Dynamic Children and enter the Variable Name such as catNames.
  • Set the Source to SimpleSearchResults (Simple search).
  • Click Save.
  • Now to show the actual data, select the Text widget (inside the ListView).
  • Move to the property editor, and click on the Set from Variable. This will open a new popup.
  • Set the Source to the Dynamic children variable name such as catNames item.
  • If you are showing data from Firestore collection or a list of documents, set the Available Options to the Field name. You won't see this option if you are showing data from the list of strings.
  • Click Save.
Showing search results in a ListView

6. Add Conditional Visibility on ListViews

At this point, you have two ListViews. The first one shows the all items whereas the other shows the search result items. But you have to display only one at a time. The first ListView should be displayed when the search is not performed or the search result is cleared whereas the other ListView should be displayed only after the search is performed.
This can be achieved by adding Conditional Visibility on both the ListView. For this, you'll use the local state variable (created in step 1) to determine which listview to show.
The steps to add conditional visibility are as follows:
  • Select the first ListView (that shows all items) from the widget tree or from the canvas area.
  • Move to the Property Editor and turn on the Conditional Visibility.
  • Click on the Unset text. (This will open a new panel).
  • Find the Source dropdown, click on unset, and select the Local State.
  • Set the Available Options to the local state variable name (i.e showFullList).
  • Click Save.
  • Now, select the second ListView (that shows the search result) from the widget tree or from the canvas area.
  • Move to the Property Editor and turn on the Conditional Visibility.
  • Click on the Unset text. (This will open a new panel).
  • This time, Turn on the Apply Opposite Statement.
  • Find the Source dropdown, click on unset, and select the Local State.
  • Set the Available Options to the local state variable name (i.e showFullList).
  • Click Save.
Adding conditional visibility

7. Clearing the search result

Allowing users to clear the search result, helps them quickly get back to the original list (all items) and try the new search term. In step 2, you added the cancel button inside the search bar, which you can use now to add an action to update the local state variable and clear the TextField value.
Here's how you do it:
  • Select the cancel IconButton from the widget tree or from the canvas area.
  • Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
    • Click on the + Add Action.
    • On the right side, search and select the Update Local State action.
    • Set the Select field to update to the Local State variable name.
    • Set the Select Update Type to the Set Value.
    • Set the Value Source to Specific Value.
    • Set the Value to True.
    • Now, click on the + button at the bottom of the box and select Add Action.
    • On the right side, search and select the Clear Text Fields action.
    • Checkmark the name of TextField to clear the value.
    • Click Close.
Clearing search result
When you run the app, it should look like the visual shown at the start of this section.
Copy link
On this page
How to search
Adding Simple Search
1. Add local state variable
2. Building search bar
3. Adding search action
4. Update Local Sate variable
5. Showing search results in a ListView
6. Add Conditional Visibility on ListViews
7. Clearing the search result