** HOT **

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.
_____
Starter Project - app.flutterflo...
Final Project - app.flutterflo...
🔥 Looking for more content and a helpful community? Why not consider joining The Digital Pro's #Nocode Academy at www.thedigital...
_____
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
_____
🚀 The Digital Pro's NoCode Academy: www.thedigital...
(Support the channel and go ad-free! 😉)
🔥 If you love my content why not consider buying me a coffee, it's really appreciated: www.thedigital...
👍 Support the channel and grab yourself a free FlutterFlow account by clicking here: www.thedigital...
🎉 Your love is much appreciated ... A like to this video is like a High Five!!! Thank you all.

[@the_digitalpro]

🔥 Looking for more exclusive content and a helpful community? Why not consider joining The Digital Pro's #NoCode Academy at www.thedigitalpro.co.uk/

[@rsquaredinnovations]

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

[@the_digitalpro]

You are most welcome totally agree 👍

[@zorayanuthar9289]

#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.

[@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

[@the_digitalpro]

That's great thank you. Wish I could talk Spanish but thankfully the power of translation really helps. Appreciate you being a Spanish Watcher.

[@jimvh7557]

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

[@laugedyret]

Love it!

[@the_digitalpro]

Thank you 😊

[@josephkarman]

Love the video❤

[@the_digitalpro]

Awesome thank you 😊

[@SharadGurung-nq5sn]

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

[@the_digitalpro]

Love this idea 💡 thank you.

[@imtmtb1574]

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

[@the_digitalpro]

Shoot me an email at [e-mail] and I'll take a look. I do have a tight schedule of stuff I need to produce so I cannot promise anything.

[@tashfinbashar1943]

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

[@the_digitalpro]

Hi. No not in this simple example. Totally optional. It's recommended that when working with dynamic lists that you do set a unique key. Ie from a database you could set the unique key of the record. For further information on unique key's do checkout FlutterFlow documentation at docs.flutterflow.io/widgets-and-components/custom-components#set-unique-key.

[@daleoshea4204]

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.

[@SandroHagen-gn3xl]

same question here! wanted to achieve exactly this - however video helped a lot as well!

[@jimvh7557]

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?

[@jimvh7557]

Flutterflow released a mastering layouts in FF video 3 days ago that answers all of my questions here. They explained it in a brilliant way!

[@koen.mortier_fitchen]

It is indeed hard to like really understand what is what. I have spent at least 100 hours on watching Flutterflow things. I understand only a tiny bit of it so far. All tutorials everywhere are pieces of a puzzle. But no matter what, I'll continue. This account is the best one imo. Container: to style anything in it. Size, background colour, etc. Row: stack things horizontally next to each other. Like 2 containers. Column: same, but vertically If a column is inside a container, it is to have the layout control over that entire column. I think.

[@jimvh7557]

@@koen.mortier_fitchen FF made a great video 2 months ago, mastering layouts in Flutterflow. Thats was soooo helpful to me!

[@koen.mortier_fitchen]

@@jimvh7557 You're right. I saw it too, Mastering layouts or something it was called.

[@10points56]

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

[@the_digitalpro]

I do not believe this is possible out of the box within FlutterFlow.

[@10points56]

@@the_digitalpro with custom code?

[@yorgohoebeke]

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

[@the_digitalpro]

Hi no not at all. Callbacks are applied but no parameters are passed. I do make a reference to callback parameters but these are not needed. You'll be fine. Good luck.

[@yorgohoebeke]

@@the_digitalpro Okay great thank you :)

[@alghamdiaag]

is this updated in flutterflow documentation ?

[@jimvh7557]

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?

[@the_digitalpro]

Hi this must surely be a glitch in FF. After an hour is it working?

[@jimvh7557]

@@the_digitalpro Seems to work for my other small projects but not for these 2, start & final clones. Still the same loading issue here.

[@Statsjk]

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

[@the_digitalpro]

Hello. Thank you for your comment. I am so sorry about this. It is an English speaking channel and thankfully captions really help. I'll take all of this into consideration in future videos. Many thanks.

[@jimvh7557]

You can slow down the video on KZbin while playing to .75 or .50 speed. I tend to always speed up videos while watching. Works perfectly.

[@awlhunt]

I have the opposite problem - I play most videos on 1.5x so that it’s not too slow. 🤷‍♂️