Dynamic dropdowns in FlutterFlow enhance user experience by fetching real-time data from an API and updating options dynamically. In this guide, we will create cascading dropdowns where the second dropdown updates based on the selection in the first one. Let’s explore how to implement this feature in FlutterFlow using Xano as our backend.

Why Use Dynamic Dropdowns?

Dynamic dropdowns provide:

• Real-time Data Fetching: Options are updated dynamically from an API.
• Better User Experience: Reduces errors by displaying only relevant choices.
• Flexible Application Logic: Easily adaptable for various use cases like country-state selection.

Steps to Create Dynamic Dropdowns in FlutterFlow

1. Creating an API for Dropdown Data in Xano

Step 1: Setup Country Data

1. Go to Xano and create a new table named Country.
2. Add columns: country_name and country_code.
3. Populate with country data.

Step 2: Create API Endpoint

1. In Xano, navigate to API.
2. Click Add API Group and name it Master API.
3. Add a new Custom API Endpoint.
4. Select Query All Records and choose Country table.
5. Save and Publish the API.

Step 3: Test the API

1. Run the API call in Xano.
2. Ensure a JSON response with country names.

2. Connecting API to FlutterFlow

Step 1: Add API in FlutterFlow

1. Go to FlutterFlow Dashboard.
2. Navigate to API Configuration.
3. Click Add API Group and name it Master API Group.
4. Add an API Call named Get Countries.
5. Enter the Xano API endpoint URL.
6. Set Response Type to JSON and define the JSON Path for country_name.

Step 2: Create Page State for Country Dropdown

1. In FlutterFlow, go to Page Variables.
2. Create a new variable country_list of type List<String>.
3. Set the On Page Load action to fetch API data.
4. Update country_list with API response.

Step 3: Bind API Data to Dropdown

1. Add a Dropdown Widget.
2. Set Options to country_list.
3. Now, when the page loads, country options will be fetched dynamically.

3. Creating a Dependent State Dropdown

Step 1: Create States API in Xano

1. Go to Xano and create a States table.
2. Add columns: state_name, country_name.
3. Populate with state data.

Step 2: Add API Endpoint for States

1. Create a New API Call in Master API Group.
2. Name it Get States.
3. Set the query parameter to country_name.
4. Test the API with different countries.

Step 3: Bind API Response to State Dropdown

1. Create a Page Variable state_list (List).
2. Add an Action Flow on Country Dropdown Change.
3. Call Get States API with country_name as input.
4. Update state_list with API response.
5. Bind state_list to the State Dropdown Widget.

4. Testing the Dynamic Dropdowns

1. Run FlutterFlow Test Mode.
2. Select a country and ensure the state dropdown updates accordingly.
3. Test with different countries.
4. Validate smooth API integration.

Conclusion

Congratulations! You’ve successfully created dynamic dropdowns in FlutterFlow. This technique enhances interactivity and improves user experience by dynamically updating dropdown values based on API responses.