Choice Chips are used in various applications to make it easier for users to select a single/multiple option(s) from a set of available option chips. You can use this widget to change the UI elements to display on the page based upon the selection or filter a list of results.

There's also a Multiselect mode of the ChoiceChips. You can enable this to let users select multiple options at once from the set.

Chips are a part of the Material Design components. Learn more about them here.

Today, you will learn to use the ChoiceChips widget of FlutterFlow to filter the Firestore query results.

Getting Started

We will demonstrate the Choice Chips filtering by building a simple restaurant menu filter. Users can use this filter to filter out the menu according to their food dish preferences.

The app will have just three pages:

• Login Page: For authentication returning users who have an account.
• Create Account Page: For authenticating new users by creating a user account.
• Menu Page: For displaying the food menu along with the filters (Choice Chips).

⭐

Ideally, you would like to have a restaurant selection page before displaying that restaurant's menu. But for this demonstration, just the Menu Page would be sufficient.

Authentication pages (LoginPage and CreateAccountPage) are not relevant to today's topic, so we'll be skipping the details of building these pages. But, you can get an in-depth walkthrough of authentication in FlutterFlow, here.

The app in action will look like this:

0:00/1×

Firestore Structure

You should complete the Firebase setup (and also enable authentication) inside your FlutterFlow project before starting with the Firestore Collection structure.

The menu can be stored as a Firestore Collection with the following fields:

You can create a new Collection with the name "menu" and add the above fields (along with their correct Data Type).

Once you have added all the fields, specify and deploy the Firestore Rules by going to the Firestore Settings tab, as follows:

As we are building this as a demo app, let's add some sample data to the Firestore Collection so that we would be able to perform queries and try out filters on them!

You can go to the Collections page > menu and click on the Manage Content button.

On the Firestore Data Manager page, select the "menu" Collection from the left menu, and click + Add Document button to add a new document to the collection.

Enter the field values and provide a link/upload a food image. Click Add Document. You can add more documents to the collection in the same way.

👉

Check out the clonable version of this project, where I have added some sample documents to the Firestore collection for you to try out easily 🙂.

We have added the following dishes to the menu 😋:

Now, you are ready to use this Collection to perform queries on it 🔥.

Adding Choice Chips

Let's add the ChoiceChips widget to the MenuPage. Follow the steps below:

1. Drag and drop the ChoiceChips widget onto the page.
2. Add the options you want to present to the user under the Define Options section.
3. Enter the text of the Initial Option that you want to be selected when a user arrives on the MenuPage for the first time.
4. Enable the Require Selection toggle.
5. Now, you can customize the Selected and Unselected Chip Style to match your app's theme.

TIP: Always add an "All" option. It lets the user view the entire menu initially and can then decide to apply any filter if needed. You need to specify the "All" option under all the dishes "type" inside the menu Firestore collection. You will understand this better when we apply the filter on the Firestore query (we'll be using "type" to filter the query results).

0:00/1×

ChoiceChips can automatically wrap to a new row when there isn't enough space to fit all the chips horizontally.

Completing Menu Page

Before adding the Firestore Query, you need to add a Column widget below the Choice Chips. It will contain each of the items inside which the details about a dish would be displayed.

0:00/1×

The overall widget tree of the Menu Page will look like this:

Setting up Query with filter

You need to set the query on the Column widget that contains each dish to be displayed. Follow the steps below:

1. Select the Column widget.
2. From the Properties Panel (right), go to the Backend Query tab.
3. Select the Query Type as Query Collection > menu (collection name) > List of Documents.
4. To add a query filter, click + Filter button.
5. Choose the Collection Field Name as type.
6. Select Array Contains as the Relation.
7. Select the Value Source as From Variable > WidgetState > ChoiceChips (this is the currently selected option text).
8. Click Confirm. Inside the dialog, click Confirm again (this will generate the children dynamically from the query result).

👉

TIP: If you have enabled Multiselect on the ChoiceChips, you should use Array Contains Any as the Firestore filter relation.

0:00/1×

Now, you can use the menu Document fields inside the widgets. Set the name, price, description, and image from the retrieved document.

0:00/1×

Conclusion

Congratulations 🎉, you have successfully implemented a choice chip filter for Firestore queries! One another famous app category where you can take advantage of the choice chips filter is E-commerce apps.

You can get the clonable version of this project here.

Try out the sample app in Run mode!

References

Check out the following pages for more information regarding the concepts used in this blog post:

• ChoiceChips
• Firestore Database - Retrieving Data
• Firestore Content Manager