Merge branch 'pinkesh/update-app-store-deployment' of https://github.com/FlutterFlow/flutterflow-documentation into pinkesh/update-app-store-deployment

Author: pinkeshmars

docs/ff-concepts/adding-customization/custom-widgets.md

@@ -57,6 +57,10 @@ this example, we will create a `ProductRatingBar` widget that uses a pub.dev dep
     </iframe>
 </div>
 
+:::info[Widget Builder as Parameter]
+You can also leverage [**Widget Builders**](../../resources/ui/components/widget-builder-parameters.md) that allow you to pass in widgets to be used within the custom widget tree. This is especially useful when you want to dynamically substitute content for some part of a custom widget - like displaying an item in a custom widget popup.
+:::
+
 ### Properties: Width & Height
 
 For custom widgets, it is mandatory to specify both width and height. These properties are required to size the custom widget appropriately. Without setting these dimensions, the custom widget will not render correctly within your application.

docs/resources/ui/components/creating-components.md

@@ -224,9 +224,9 @@ respective widgets and action triggers.
 
 Aside from standard data types used throughout FlutterFlow, you can also create parameters that are of type:
 
-- **Action (callback)**: This allows component users to pass in actions into the component. The component can then invoke the action, usually referred to as a callback, in its own action flows. Callbacks are often using to handle events, like updating a parent's state when a button has been pressed. [You can learn more about how to use callbacks here.](/resources/ui/components/callbacks)
+- **Action (callback)**: This allows you to pass in actions into the component. The component can then invoke the action, usually referred to as a callback, in its own action flows. Callbacks are often using to handle events, like updating a parent's state when a button has been pressed. [You can learn more about how to use callbacks here.](/resources/ui/components/callbacks)
 
-- **Widget Builders**: Widget builders allow the component users to pass in widgets to be used within the component's widget tree. This is especially useful when you want users to dynamically subsitute content for some part of a component - like displaying an item in a custom dropdown, or creating a component for some consistent layout. [You can learn more about how to use Widget Builders here.](widget-builder-parameters.md)
+- **Widget Builders**: Widget builders allows you to pass in widgets to be used within the component's widget tree. This is especially useful when you want to dynamically substitute content for some part of a component - like displaying an item in a custom dropdown, or creating a component for some consistent layout. [You can learn more about how to use Widget Builders here.](widget-builder-parameters.md)
 
 
 ### Actions

docs/resources/ui/widgets/built-in-widgets/tooltip.md

@@ -4,15 +4,15 @@ tags: [Base Elements]
 
 # Tooltip
 
-The Tooltip widget provides a textual description of a widget in a small popup box. It appears when the user taps or long-presses the widget or hovers over it. It's typically used to provide an explanation about the function of a widget.
+The Tooltip widget provides additional information or visual cues of a widget in a small popup box. It appears when the user taps or long-presses the widget or hovers over it. It's typically used to provide an explanation about the function of a widget.
 
 :::info
 It is not frequently used on touch devices where tapping or long-pressing can initiate other actions. But they can be incredibly useful in the desktop environment where hover functionality is available.
 :::
 
 ![tooltip.png](imgs/tooltip.png)
 
-## Adding *Tooltip* widget
+## Adding Tooltip widget
 
 To add the *Tooltip* widget to your app:
 
@@ -51,6 +51,38 @@ Widget** and then select **Tooltip** widget.
 You can customize the appearance and behavior of this widget using the various properties 
 available under the Properties Panel.
 
+### Component as Tooltip
+
+Sometimes, you may want to display more than just text in a tooltip—such as images, icons, buttons, or other custom components. For example, in an e-commerce app, a tooltip could show a detailed breakdown of customer reviews when users hover over the overall rating.
+
+To achieve this, simply set the **Tooltip Type** to **Component** and select the custom component you'd like to display.
+
+<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/jnFUZZQ9pmCH5vgvhVVA?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>
+
 ### Change trigger mode
 
 On touch devices, the *Tooltip* opens on tap. To make it open on long press instead, use the **Trigger Mode** property.

docs/testing-deployment-publishing/development-environments/development-environments.md

@@ -54,7 +54,7 @@ You can create and switch environments in the **Dev Environments** page in **App
 </div>
 <p></p>
 
-The selected environment is used to generate the proper app code when you run, test, deploy or export your app. The only things that change between environment are the [Firebase Project](#configuring-firebase-for-each-environment) or variables that are tied to [Environment Values](#use-environment-values)
+The selected environment is used to generate the proper app code when you run, test, deploy or export your app. The only things that change between environment are the [Firebase Project](#configuring-firebase-or-supabase-for-each-environment) or variables that are tied to [Environment Values](#use-environment-values)
 
 
 ### Use Environment Values
@@ -100,19 +100,63 @@ After switching to an environment, FlutterFlow generates code specific to that e
 You also may see different project errors depending on which environment you have selected.
 :::
 
-### Configuring Firebase for each Environment
-A single FlutterFlow project can have **multiple environments**, each mapped to its **own Firebase project**. This ensures that environments like `Development`, `Staging`, and `Production` remain independent, giving you better control over your app's data and behavior throughout different stages of development.
+### Configuring Firebase or Supabase for each Environment
+A single FlutterFlow project can have **multiple environments**, each mapped to its **own Firebase or Supabase project**. This ensures that environments like `Development`, `Staging`, and `Production` remain independent, giving you better control over your app's data and behavior throughout different stages of development.
 
-![flutterflow-environment](../imgs/flutterflow-environment.avif)
+![flutterflow-environment](../imgs/flutterflow-environment-update.avif)
 
-If your project uses Firebase, you'll need to [**manually configure a new Firebase project**](../../ff-integrations/firebase/connect-to-firebase-setup.md#connect-an-existing-firebase-project-manually) for each environment. This requires setting up a new project in the Firebase console and linking it to the selected environment in FlutterFlow. 
+You must complete the Firebase or Supabase setup for an environment before you can test your app using that environment. However, this doesn't stop you from continuing to run and test your app in other environments. Just switch back to Production, and you can keep testing while finishing the setup for the new environment.
+
+#### Configuring Firebase
+If your project uses Firebase, you'll need to create a separate Firebase project in the Firebase Console for each environment. Then, you can change the selected environment in the Firebase settings page (see below), and follow the steps to [**manually configure the Firebase project**](../../ff-integrations/firebase/connect-to-firebase-setup.md#connect-an-existing-firebase-project-manually) for each one. 
+
+
+![firebase-dev-env-config.png](../imgs/firebase-dev-env-config.png)
+
+Additionally, you must manually set up [**Firestore rules**](../../ff-integrations/database/cloud-firestore/firestore-rules.md) and [**collections**](../../ff-integrations/database/cloud-firestore/creating-collections.md) for the new environment.
 
 :::info
-- You must complete the Firebase setup for the new environment before you can test your app using that environment. However, this doesn't stop you from continuing to run and test your app in other environments. Just switch back to production, and you can keep testing while finishing the setup for the new environment.
-- You must manually set up [**Firestore rules**](../../ff-integrations/database/cloud-firestore/firestore-rules.md) and [**collections**](../../ff-integrations/database/cloud-firestore/creating-collections.md) for the new environment.
-- Data that you add to Firebase through the Content Manager is specific to the Firebase project, and environment, that you have selected
+The data that you add to Firebase through the Content Manager is specific to the Firebase project, and environment, that you have selected.
 :::
 
+#### Comnfiguring Supabase
+If your project uses Supabase, you'll need to [**set up a new Supabase project**](../../ff-integrations/supabase/supabase-setup.md) for each environment. 
+
+Create environment-specific values like `SupabaseAPIURL` and `SupabaseAnonKey`, and then configure the Supabase properties to point to these newly created values. Below is an example of how it would look like.
+
+<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/VxEaC6uxhnB4zzluIE9i?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>
+
+:::note
+It's recommended that you keep schemas consistent between the different Supabase environments. It's also recommended that you
+**Get Schema** from the Production environment and build from there.
+ :::
+
+
+
 
 
 ### FAQ