** HOT ** #FlutterFlow Component Callbacks WITH Parameters - Finally!

The #FlutterFlow team have released an update to FlutterFlow which now allows component callbacks to pass back parameters. In this video I present a simple example which demonstrates the concept and you'll see why this is big addition to your toolkit.

As always in most of my videos I always provide a downloadable project for you to explore at your leisure. In this video I very much focus on the approach than provide a full walkthrough on the setup and design of the project.

If you wish to follow along with the final section on building the callback functionality please clone the starter project. Alternatively the final project is also available for you to explore or crosscheck your work.

_____

_____

Chapters

00:00 Introduction
00:22 Application Preview
01:24 Foundation project overview
03:20 What we are trying to achieve
05:02 Component parameters setup
09:07 Populating our component parameters
11:20 Configure the Staff Selector Component
13:28 Testing + Corrections
15:10 Outro

_____

(Support the channel and go ad-free! 😉)

🎉 Your love is much appreciated ... A like to this video is like a High Five!!! Thank you all.

[DeSofSistemas]

Your videos are fantastic brother. I only understand Spanish but with the help of some tools I translate your videos so I can understand. CONGRATULATIONS

[rsquaredinnovations]

The component callbacks are a much needed capability. Thanks for the instruction covering this!

[zorayanuthar]

#VIDEO SUMMARY

1. ****0:00** - Introduction**
2. ****1:20** - Example Overview**
3. ****3:30** - Setting Up in FlutterFlow**
4. ****4:50** - Project Orientation**
5. ****7:00** - Component Parameters Explanation**
6. ****9:00** - Setting Component Parameters**
7. ****13:30** - Callback Setup**
8. ****17:00** - Hooking Widgets to Parameters**
9. ****19:00** - Parent Component Configuration**
10. ****21:30** - Conditional Visibility Setup**
11. ****24:00** - Action Flow Editor Setup**
12. ****27:00** - Testing and Debugging**
13. ****30:00** - Conclusion**

---

### Practical Steps to Implement Component Callback Parameters in FlutterFlow

1. **Project Setup**
- Create a new FlutterFlow project or open an existing one.
- Design a home page with a button (e.g., "Book Appointment") that opens a bottom bar.

2. **Component Creation**
- Create a component for displaying staff members. This component will include:
- An image (circular avatar).
- A text field for the staff member's name.
- A checkbox to denote selection.
- An animated container for visual effects.

3. **Setting Up Component Parameters**
- Open the component settings and add the following parameters:
- **Staff Data Type**: Custom data type for staff details (e.g., ID, name, photo URL).
- **Selected Staff ID**: Integer to track which staff member is selected.
- **Callback Parameter**: Action type to handle the selection callback.

4. **Configuring Component Widgets**
- Bind the image and text fields to the staff data type parameters.
- Set up conditional visibility for the checkbox to show/hide based on the selected staff ID.
- Add an action to the staff container to execute the callback when a staff member is selected.

5. **Parent Component Configuration**
- In the parent component (e.g., the bottom bar), add the staff selection component and bind its parameters:
- Pass the staff item to the staff parameter.
- Pass the local state variable for the selected staff ID.
- Set up the callback to update the local state with the selected staff ID.

6. **Handling Callback in Parent Component**
- In the action flow editor of the parent component, set up an action to update the local state when the callback is executed. Use the callback parameter to get the selected staff ID.

7. **Testing and Debugging**
- Test the application to ensure that the selection works correctly and the visual feedback (checkbox and animation) is responsive.
- If there's a delay in the visual feedback, set the animation to non-blocking in the action flow editor to ensure the callback executes immediately.

8. **Final Adjustments**
- Make any final adjustments to the design and interactions to ensure a smooth user experience.
- Test thoroughly to ensure all components and callbacks are working as expected.

### Concepts Explained

- **Component Parameters**: These are inputs that you pass into a component to customize its behavior and appearance.
- **Callback Parameters**: These allow a child component to send information back to its parent component. This is crucial for managing state and interactions in a modular way.
- **Non-Blocking Animations**: Setting an animation to non-blocking ensures that other actions can proceed without waiting for the animation to complete, improving responsiveness.
- **Local State**: Variables that are specific to a component, used to manage state within that component.

By following these steps, you can effectively use component callback parameters in FlutterFlow to create interactive and modular applications.

[jimvh]

I will rewatch this one a few times for sure. Great video!! Have to try it with Supabase data.

[jimvh]

Hi Steve, I have another question. My biggest confusing element when it comes to designs/layouts in FF is also visible in the starter project here. In my head a column consists of multiple rows or a row consists of multiple columns, just like a table, where the row or column can then contain multiple types of elements. Here the column starts with a row but the second element is a container. I would put the container inside of a row. So when exactly would you use a row, column or container? Are they actually all containers but just serving a different purpose. I guess so and I have to let go of my idea in my head, right?

[daleoshea]

Is it possible to do a callback when you go from a page to a bottom sheet and then to a second bottom sheet? I would like to callback a database refresh action to the page from the 2nd bottom sheet. My first BS is a menu which then takes me to the second one where I need to refresh a listview on the page.

[SkoudGeorge]

when i have a component to a page it doesnt show me the callback parameter option

[yorgohoebeke]

I am just about to start your crashcourse: does this feature change something for what we do in the crashcourse?

[tashfinbashar]

At 9:17 don't we need to select unique key? What is the function of that?

[alghamdiaag]

is this updated in flutterflow documentation ?

[imtmtb]

REQUEST for a Flutterflow tutorial.
I’m starting up an app I need to launch soon and creating something really simple but uncommon. I can’t find any tutorial videos on it.
Do you think you can make a quick tutorial video for my idea?
If so, I’ll explain what I want

[SharadGurung-nqsn]

dynamically created component and multiple rows to be inserted in supabase please.

[points]

Do you have solution for how can I read all SMS from users device?

[jimvh]

I just cloned both the start and final project but none of them wants to load in test mode.. blue bar keeps animating. So I can follow along in dev mode, all works fine, but the test session builds but does not load the homepage at all. Anyone else experiencing this?

[Statsjk]

Hey your English is too fast...it is little bit hard for me to follow without captions as a non native English speaker....