Merge branch 'main' into david/firebase-issues

Author: PoojaB26

docs/accounts-billing/imgs/pricing-timeline-2025-dark.png

@@ -139,15 +139,16 @@ You need to create an instance of a class so you can work with actual data and u
     );
     ```
 
-- You can reuse the same class structure multiple times with different review data.
+- In FlutterFlow, you will store the instance of the custom class in the [state variables](../../ff-concepts/state-management/state-variables.md#state-variables) of your app, page, or component.
+- You can create multiple instances of the same class, reusing the same structure multiple times, each with different review data.
 
 When you create an instance of a class, you can:
 
 - Store actual review details.
 - Access and update the fields (e.g., `review1.rating` or `review1.comment`).
 - Call methods that do something with that data (e.g., `review1.markHelpful()` or `review1.shortComment()`).
 
-To create an instance of a custom class, open the **Set from Variable** dialog and select **Create Custom Class Instance**. Choose the class you want to use, then select the class name from the **Constructor** dropdown. After that, set values for each of the required fields.
+To create an instance of a custom class, first you need to [create a state variable](../../ff-concepts/state-management/state-variables.md#creating-state-variables) (of type Custom Class) that will hold the instance. Then, to create and add the instance to the state variable, open the **Set from Variable** dialog and select **Create Custom Class Instance**. Choose the class you want to use, then select the class name from the **Constructor** dropdown. After that, set values for each of the required fields.
 
 
 <div style={{
@@ -412,7 +413,15 @@ Use the **Call Static Method** action to run a static method of your class. For
 
 Similar to how you add a custom class, you can also add Custom Enums in your app. [Enums](../../resources/data-representation/enums.md) are a great way to define a fixed set of values, such as user roles, order statuses, or content types. Once parsed, these enums become available throughout your app and can be used in dropdowns, conditionals, and UI bindings.
 
-For example, you could define an enum called `ReviewStatus` with values like `pending`, `approved`, and `rejected`.
+For example, you could define an enum called `ReviewStatus` with values like `pending`, `approved`, and `rejected`. Here's the code snippet for it:
+
+```jsx
+enum ReviewStatus {
+  pending,
+  approved,
+  rejected,
+}
+```
 
 ![custom-enums.avif](imgs/custom-enums.avif)
 

docs/accounts-billing/imgs/pricing-timeline-2025-light.png

@@ -5,7 +5,10 @@ description: Learn how to add and configure the Google Maps widget in your Flutt
 tags: [Google Maps, Widget, Integration]
 sidebar_position: 2
 keywords: [FlutterFlow, Google Maps, Widget, Integration]
+toc_max_heading_level: 4
 ---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 # Google Maps Widget
 
@@ -155,6 +158,70 @@ the Map**.
 <div class="video-container"><iframe src="https://www.loom.
 com/embed/1b06bfc1365f4fc68f15089d4f84d798?sid=ff33ea94-cd7f-4b4e-822e-6fe0743dbd27" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
 
+#### Map Takes Gesture Preference
+When this is turned on, any gestures, such as zooming or dragging, will only affect the map, not the rest of the page. This is helpful if your map is inside a scrollable page, so users can interact with the map without accidentally scrolling the whole page.
+
+:::info
+This setting is only available if **Allow Interacting** and **Allow Zooming** are turned on.
+:::
+
+<Tabs>
+<TabItem value="1" label="Map Takes Gesture Preference (Disabled)" default>
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/JC6AnbIQpfSPfENrbd6s?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+</TabItem>
+<TabItem value="2" label="Map Takes Gesture Preference (Enabled)">
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/m5EdLhn4tlkjfRhhquqg?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+</TabItem>
+</Tabs>
+
 ### Show User Location
 
 When enabled, a blue dot appears on the map to indicate the user's current location. If the map is

docs/accounts-billing/new-pricing-comparison.md

@@ -0,0 +1,100 @@
+---
+slug: /resources/forms/form-triggers
+title: Form Triggers
+tags: [Form, Actions, Triggers]
+keywords: [FlutterFlow, Form Triggers, User Interactivity, Dropdown, Slider, Toggle, TextField, On Selected, On Toggled, On Change, On Focus Change]
+description: Learn how to use Form Triggers in FlutterFlow to create dynamic, interactive user experiences by responding to user input on widgets like dropdowns, sliders, toggles, and text fields.
+sidebar_position: 4
+---
+
+# Form Triggers
+
+**Form Triggers** in FlutterFlow allow you to respond dynamically to user input on widgets like dropdowns, sliders, toggles, and text fields. Whether it’s selecting an option, toggling a switch, or typing in a field, these triggers help you create interactive, responsive experiences by executing actions based on user interaction.
+
+## On Selected
+
+The **On Selected** action trigger is used to perform actions when a user selects or changes a value from a widget that presents multiple options. This trigger is associated with form widgets where selection input is required, such as [Dropdown](form-widgets/dropdown.md), [RadioButton](form-widgets/radiobutton.md), [CheckboxGroup](form-widgets/checkbox.md#checkboxgroup), [ChoiceChips](form-widgets/choicechips.md), and [Slider](../../../ui/widgets/built-in-widgets/slider.md).
+
+:::tip[Possible use cases]
+
+- **Dropdown – Shipping Method Selection:** User selects a shipping method from options like "Standard", "Express", or "Next Day". Action under the *On Selected* trigger sets the app state variable `shippingOption`, which updates pricing or estimated delivery time dynamically.
+- **Slider – Show Volume Level in Snackbar:** User adjusts a Slider from 0 to 100. The *On Selected* trigger displays a Snackbar showing the current volume: Volume set to: [sliderValue].
+- **ChoiceChips – Filter Products by Category:** User taps a chip like "All", "Electronics", or "Clothing". The *On Selected* trigger might set an app state variable (e.g., `selectedCategory`) and update the product list to match the chosen category.
+
+:::
+
+To use the **On Selected** trigger:
+
+1. Start by selecting a supported widget, such as a Dropdown.
+2. Open the **Actions** tab in the properties panel and click **+ Add Action**.
+3. You will notice that the **Type of Action** (aka callback) is already set to **On Selected**. That means actions added under this will be called whenever the selection changes.
+4. Finally, define the actions you want to perform when the user makes a selection, such as setting a variable, navigating to another page, or displaying a message.
+
+![on-selected](imgs/on-selected.avif)
+
+## On Toggled On / On Toggled Off
+
+The **On Toggled On** and **On Toggled Off** action triggers are used to perform actions when a user turns a toggleable widget on or off. These triggers are supported by widgets such as [Checkbox](form-widgets/checkbox.md), [CheckboxListTile](form-widgets/checkbox.md#checkboxlisttile), [Switch](form-widgets/switch.md), and [SwitchListTile](form-widgets/switch.md#switchlisttile), any widget that represents a binary state.
+
+These triggers are especially useful when you want to conditionally execute different actions based on whether a user enables or disables a setting, preference, or feature.
+
+:::tip[Possible use cases]
+
+- **Switch – Enable Dark Mode:** User toggles a Switch to enable Dark Mode. Action under the *On Toggled On* trigger sets the dark mode.
+- **Checkbox – Agree to Terms:** User checks a Checkbox labeled “I agree to the terms and conditions.” The *On Toggled On* trigger enables the Submit button. If the user unchecks it, the *On Toggled Off* trigger disables the button again.
+- **CheckboxListTile – Select Notification Channels:** User checks or unchecks options like Email, SMS, or Push Notifications. Each toggle fires either *On Toggled O*n or *On Toggled Off* to update selected preferences in the backend.
+
+:::
+
+To use the **On Toggled On** or **On Toggled Off** trigger:
+
+1. Start by selecting a supported widget, such as a Switch.
+2. Open the **Actions** tab in the properties panel and click **+ Add Action**.
+3. Choose **On Toggled On** to define actions when the toggle is switched on, or **On Toggled Off** to define actions when it's switched off.
+4. Add your desired actions, such as updating a variable, showing a message, enabling a button, or triggering a backend call.
+
+![on-toggle](imgs/on-toggle.avif)
+
+## On Change
+
+The **On Change** action trigger is used to respond to real-time user input as they type or modify the contents of an input field. This trigger is supported by widgets such as [TextField](form-widgets/text-field.md) and [Pincode](../../../ui/widgets/built-in-widgets/pincode.md).
+
+It’s ideal for enabling live form validations, updating app state as the user types, or enabling/disabling UI elements based on the current input.
+
+:::tip[Possible use cases]
+
+- **TextField – Enable Button When Email Is Entered:** As the user types in an email TextField, action under the *On Change* trigger checks if the input is a valid email. If it is, it enables the Continue button.
+- **Pincode – Auto Submit When Complete:** When a user finishes entering a 6-digit code in a Pincode widget, action under the *On Change* trigger checks if the full code is entered and triggers form submission or a backend call.
+
+:::
+
+To use the **On Change** trigger:
+
+1. Start by selecting a supported widget, such as a TextField.
+2. Open the **Actions** tab in the properties panel and click **+ Add Action**.
+3. Choose **On Change** from the list of available triggers.
+4. Define the actions to trigger, such as setting a variable, showing a message, or calling an API.
+
+![on-change](imgs/on-change.avif)
+
+---
+
+## On Focus Change
+
+The **On Focus Change** trigger fires whenever an input field gains or loses focus, like when a user taps into or out of a [TextField](form-widgets/text-field.md) and [Pincode](../../../ui/widgets/built-in-widgets/pincode.md) widget. It’s useful for providing user guidance (on focus) or performing validations.
+
+:::tip[Possible use cases]
+
+- **TextField – Show Hint on Focus:** When the TextField gains focus, action under the *On Focus Change* trigger displays a helper text or tooltip with input instructions (e.g., “Enter your phone number without dashes”).
+- **Pincode – Validate on Exit:** When the user finishes entering the code and the Pincode widget loses focus, action under the *On Focus Change* trigger runs validation logic to check if the input is complete or valid, and displays an error if it's not.
+
+:::
+
+To use the **On Focus Change** trigger:
+
+1. Start by selecting a supported widget, such as a TextField.
+2. Open the **Actions** tab in the properties panel and click **+ Add Action**.
+3. Choose **On Focus Change** from the list of available triggers.
+4. Define the actions to trigger, such as showing helper text, validating input, or updating the UI based on focus.
+
+![on-focus-change](imgs/on-focus-change.avif)

docs/accounts-billing/plan-pricing.md

@@ -77,7 +77,8 @@ Here is a simple way to do it:
 </div>
 <p></p>
 
-### Setting initial value
+
+### Setting Initial Value
 
 You might want to show the checkbox with a default value, either check or uncheck. For example, showing the checked checkbox for travel insurance.
 
@@ -112,45 +113,9 @@ To set the initial value:
 </div>
 <p></p>
 
-### Saving checkbox value
-
-You might want to save the checkbox's value as soon as it is checked or unchecked. For example, saving in an app state variable or Firestore document field. You can do so by adding the action on the checkbox widget.
-
-The checkbox widget provides you with the following types of actions (aka callbacks), and you can choose any of them to add actions under it.
-
-1. **On Toggled On**: Actions added under this will be triggered whenever the checkbox is selected/checked.
-2. **On Toggled Off**: Actions added under this will be triggered whenever the checkbox is unselected/unchecked.
+### Saving Checkbox Value
 
-Here's how you do it:
-
-1. Select the **Checkbox** widget, select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window.
-2. Select **On Toggled On** or **On Toggled Off** and add an action that will update the value. (e.g., [update app state](../../../../../resources/data-representation/app-state.md#update-app-state-action), [update Firestore record](../../../../../ff-integrations/database/cloud-firestore/firestore-actions.md), etc.)
-
-<div style={{
-    position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
-    height: 0,
-    width: '100%'}}>
-    <iframe 
-        src="https://demo.arcade.software/O8U6Xv5IbVwH9qDwVVfV?embed&show_copy_link=true"
-        title=""
-        style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            colorScheme: 'light'
-        }}
-        frameborder="0"
-        loading="lazy"
-        webkitAllowFullScreen
-        mozAllowFullScreen
-        allowFullScreen
-        allow="clipboard-write">
-    </iframe>
-</div>
-<p></p>
+You may want to immediately save the checkbox’s value when it is checked or unchecked. To do this, [add an action using the trigger](../../forms/form-triggers.md#on-toggled-on--on-toggled-off) that responds to changes in the widget’s selection.
 
 ### Customizing
 
@@ -310,7 +275,11 @@ Here's an example of how you can use the CheckboxGroup widget in your project:
 </div>
 <p></p>
 
-### Setting initial selection
+### Trigger Action on Change
+
+See how to [trigger an action when a selection changes](../../forms/form-triggers.md#on-selected) on this widget.
+
+### Setting Initial Selection
 
 Sometimes you might want to display the CheckboxGroup with some options already selected. For example, selecting the topping options that are already served with Pizza itself. You can do so by setting the initial selection for the CheckboxGroup.
 
@@ -522,6 +491,3 @@ To customize the checkbox border:
 </div>
 <p></p>
 
-:::info[Trigger action on change]
-See how to [**trigger an action when a selection changes**](../../../../ui/widgets/widget-commonalities.md#trigger-action-on-selection-change) on this widget.
-:::

docs/ff-concepts/adding-customization/code-file.md

@@ -52,11 +52,11 @@ To add the ChoiceChips widget to your app:
 </div>
 <p></p>
 
-## Trigger action on change
+### Trigger Action on Change
 
-See how to [trigger an action when a selection changes](../../../../../resources/ui/widgets/widget-commonalities.md#trigger-action-on-selection-change) on this widget.
+See how to [trigger an action when a selection changes](../../forms/form-triggers.md#on-selected) on this widget.
 
-## Select or clear all choices [Action]
+## Select or Clear All Choices [Action]
 
 Users may need to swiftly deselect all chips or choose all available choice chips at once. You can do so by adding the **Clear All/Select All** action.
 
@@ -68,7 +68,7 @@ Before you add this action, ensure you [**allow multiselect**](#allow-multiselec
 
 You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
 
-### Allow multiselect
+### Allow Multiselect
 
 You might want to allow users to select multiple choices to filter the result.
 
@@ -165,7 +165,7 @@ To add a space between the chips, you can use the **Chip Spacing** ad **Row Spac
 </div>
 <p></p>
 
-### Align chips
+### Align Chips
 
 When you have chips in multiple rows, you can align them using the **Alignment** property. This is similar to setting main axis alignment for the Row widget.
 
@@ -195,7 +195,7 @@ When you have chips in multiple rows, you can align them using the **Alignment**
 </div>
 <p></p>
 
-### Customizing selected and unselected chip style
+### Customizing Selected and Unselected Chip Style
 
 Various properties under the **Selected Chip Style** and **Unselected Chip Style** section allow you to customize chips to match your design. Here's how you do it: