# #FlutterFlow Key Technique - How I built a reusable Checkbox Component Source: https://www.youtube.com/watch?v=ImSrMb_fBgM Recap page: https://rapidrecap.app/video/ImSrMb_fBgM Generated: 2025-11-16T17:05:13.933+00:00 --- ## Quick Overview The reusable Checkbox Component in FlutterFlow is built by defining a custom data type, setting up page state variables to track selections, and using dynamic children generation within a Column widget to render the list items based on the data. **Key Points:** - The core of the solution involves creating a custom data type named 'CheckItem' with 'title' (String) and 'value' (Integer) fields to structure the checkbox data. - Two page state variables are set up on the parent page: 'chkListItems' (List of CheckItem) to hold the data, and 'selectedChecklistItems' (List of CheckItem) to track user selections. - The custom component, 'CheckboxSelectionComponent', receives the main data list via a component parameter named 'chkListItems' (List of CheckItem). - The component uses a 'Column' widget configured to 'Generate Children from Variable', using the 'chkListItems' component parameter as the source list. - The component's internal 'Checkbox' widget uses an 'onToggleOn' action flow to update the 'selectedChecklistItems' page state variable by either adding or removing the current item. - The 'onToggleOff' action flow performs the reverse operation (removing the item if it exists in the selected list). - The parent page displays the resulting selected items using the 'selectedChecklistItems' page state variable, demonstrating the two-way communication between the component and the parent. ![Screenshot at 00:04: demonstration of the custom checkbox list component rendering correctly with initial data passed from the parent page.](https://ss.rapidrecap.app/screens/ImSrMb_fBgM/00-00-04.png) **Context:** This tutorial demonstrates how to create a highly reusable, dynamic checkbox component in FlutterFlow that supports multi-select functionality. The setup relies heavily on custom data types and page state variables to manage the list of items and track which items the user has selected, allowing the component to dynamically render its content based on input data. ## Detailed Analysis The tutorial details the creation of a reusable multi-select checkbox component in FlutterFlow. First, a custom data type named 'CheckItem' is created with 'title' (String) and 'value' (Integer) fields (03:03). On the parent 'HomePage', two page state variables are initialized: 'chkListItems' (List) to hold the full list of options, and 'selectedChecklistItems' (List) to store the user's choices (01:55). The reusable component, 'CheckboxSelectionComponent', accepts the main list via a component parameter, also named 'chkListItems' (04:28). Inside the component, a Column widget is set up to use the 'Generate Children from Variable' feature, sourcing its dynamic content from the 'chkListItems' parameter (06:49). Each generated child item contains a Checkbox widget configured with two critical action flows: 'onToggleOn' and 'onToggleOff' (08:05). When a checkbox is toggled on, the 'onToggleOn' flow executes an 'Update Page State' action, adding the current item's data to the component's local state variable 'selectedChecklistItems' (08:24). Conversely, the 'onToggleOff' flow removes that item from the 'selectedChecklistItems' list (09:21). Crucially, both action flows execute an 'Execute Callback' action, passing the updated 'selectedChecklistItems' list back to the parent page via the 'onChangeCallbackAction' component parameter (08:51, 10:36). The parent page then listens to this callback to update its own 'selectedChecklistItems' page state variable, ensuring the parent page always reflects the component's current selections (11:03). The video concludes by showing the selected items displayed back on the parent page, confirming the successful two-way data binding. ### Data Structure Setup - Created custom data type 'CheckItem' with 'title' (String) and 'value' (Integer) fields - Defined two page state variables on parent: 'chkListItems' (List) and 'selectedChecklistItems' (List) - Initialized 'chkListItems' during OnPageLoad action flow. ### Component Configuration - Custom component 'CheckboxSelectionComponent' accepts 'chkListItems' as a List parameter - Component uses a Column widget set to 'Generate Children from Variable' using the 'chkListItems' parameter (06:49). ### Checkbox Interaction Logic - Checkbox widget onToggleOn action adds the current item to the local state variable 'selectedChecklistItems' - onToggleOff action removes the item from 'selectedChecklistItems' (09:21). ### Component Communication - Both toggle actions execute 'Execute Callback' passing the updated 'selectedChecklistItems' list back to the parent page via 'onChangeCallbackAction' parameter (08:51). ### Parent Page Integration - Parent page's 'onChangeCallbackAction' flow uses 'Update Page State' to set its own 'selectedChecklistItems' variable to the data received from the component (11:03). ![Screenshot at 00:04: demonstration of the custom checkbox list component rendering correctly with initial data passed from the parent page.](https://ss.rapidrecap.app/screens/ImSrMb_fBgM/00-00-04.png) ![Screenshot at 01:55: Viewing the 'Local Page State Variables' on the parent page, showing 'chkListItems' and 'selectedChecklistItems' initialized.](https://ss.rapidrecap.app/screens/ImSrMb_fBgM/00-01-55.png) ![Screenshot at 03:02: Inspecting the custom data type 'CheckItem' schema with 'title' \(String\) and 'value' \(Integer\) fields.](https://ss.rapidrecap.app/screens/ImSrMb_fBgM/00-03-02.png) ![Screenshot at 04:27: Examining the component parameters for 'CheckboxSelectionComponent', specifically the 'chkListItems' \(List\\) input parameter.](https://ss.rapidrecap.app/screens/ImSrMb_fBgM/00-04-27.png) ![Screenshot at 08:11: Viewing the 'On Toggled Off' action flow in the Action Flow Editor, showing the 'Update Component State' action.](https://ss.rapidrecap.app/screens/ImSrMb_fBgM/00-08-11.png) ![Screenshot at 09:00: Inspecting the 'Execute Callback' action within the component's action flow, which sends data back to the parent.](https://ss.rapidrecap.app/screens/ImSrMb_fBgM/00-09-00.png) ![Screenshot at 10:14: Reviewing the 'Component Parameters' on the component itself, highlighting the 'chkListItems' and 'onChangeCallbackAction' parameters.](https://ss.rapidrecap.app/screens/ImSrMb_fBgM/00-10-14.png) ![Screenshot at 11:16: The dropdown menu showing available sources for the callback action value, including 'Component Parameters' and 'selectedChecklistItems'.](https://ss.rapidrecap.app/screens/ImSrMb_fBgM/00-11-16.png)