Merge branch 'refs/heads/main' into pooja/secure-keys-gen-code

Author: PoojaB26

docs/accounts-billing/payments-billing.md

@@ -5,7 +5,7 @@ This section contains information on the payment methods we accept and how to ch
 
 ## Invoices
 #### Can I Add A Tax ID (e.g. VAT) to my invoice?
-Unfortunately, at this time we are not able to process Tax IDs.
+If you need to include VAT in your invoices, please reach out to our support team at [email protected], and we’ll be happy to assist you with the process.
 
 
 ## Payment Methods

docs/ff-concepts/adding-customization/vscode-extension.md

@@ -231,6 +231,72 @@ To delete a Custom Action or Widget, delete the associated file.
 ### Adding New Dependencies
 You can add custom [pub.dev](https://pub.dev/) package dependencies with the `Dart: Add Dependency` command from the Visual Studio Code command palette. This will update the `pubspec.yaml` file.
 
+## Using Flutter Version Management (FVM)
+If you want to manage Flutter versions with [**Flutter Version Management (FVM)**](https://fvm.app/), you need to install it and add it to your system’s PATH. Follow these steps to get started:
+
+### Install FVM
+
+To install **FVM**, run the following command in your terminal. This installs FVM globally using Dart’s package manager.
+
+```
+dart pub global activate fvm
+```
+
+### Add FVM to Your System’s PATH
+
+After installation, you need to add the directory containing FVM’s executables to your **PATH variable** so that it can be accessed globally.
+
+#### For macOS & Linux
+
+1. Open the Terminal and run the following command. It adds the `~/.pub-cache/bin` directory to your system's `PATH` permanently by updating your `~/.zshrc` file. This ensures that the FVM installed in `~/.pub-cache/bin` is accessible from anywhere in the terminal.
+    
+    ```bash
+    echo 'export PATH="$PATH":"$HOME/.pub-cache/bin"' >> ~/.zshrc  # For Zsh
+    echo 'export PATH="$PATH":"$HOME/.pub-cache/bin"' >> ~/.bashrc # For Bash
+    ```
+    
+2. Restart your terminal or run `source ~/.zshrc` (or `source ~/.bashrc`) to apply the changes.
+
+#### For Windows
+
+1. Locate the **FVM executable path**, typically:
+    
+    ```
+    C:\Users\YourUsername\AppData\Local\Pub\Cache\bin
+    ```
+    
+2. Add this path to your **System’s PATH variable**:
+    1. Open **System Properties** → **Advanced system settings**.
+    2. Click **Environment Variables**.
+    3. Under **System variables**, select **Path** → **Edit**.
+    4. Click **New** and add the above path.
+    5. Click **OK** and restart your terminal.
+
+
+### Verify the Installation
+
+To check if FVM is correctly installed and accessible, run:
+
+```bash
+fvm --version
+```
+
+If this command prints the installed version of FVM, it means FVM is successfully installed and added to PATH.
+
+
+### Configure FVM in Your Flutter Project
+
+Once FVM is installed, navigate to your Flutter project folder and set up FVM:
+
+```bash
+cd your-flutterflow-project
+fvm init
+fvm install <flutter_version>
+fvm use <flutter_version>
+```
+
+*(Replace `<flutter_version>` with the required Flutter version.)*
+
 
 ## FAQs
 <details>

docs/ff-concepts/design-system/design-system.md

@@ -239,9 +239,9 @@ To add a design system from a library, first, ensure that you [add a library dep
 
 ---
 
-## Loading Indicator
+## Loading Indicators
 
-To customize the loading indicators used in the app, you can make changes in this section. You have the option to specify the **Indicator Type**, **Color**, and **Radius**, and the preview of the changes will be displayed below.
+To customize the **Loading Indicators** used in the app, you can make changes in this section. You have the option to specify the **Indicator Type**, **Color**, and **Radius**, and the preview of the changes will be displayed below.
 
 <div style={{
     position: 'relative',
@@ -269,6 +269,10 @@ To customize the loading indicators used in the app, you can make changes in thi
 </div>
 <p></p>
 
+:::tip
+Avoid mis-sized loading indicators or components, which lead to jumping layouts. Ensure loading components match the size and position of the content they replace.
+:::
+
 If you prefer watching a video tutorial, here is the guide for you:
 
 <div style={{

docs/ff-concepts/navigation-routing/imgs/share-action.avif

@@ -9,54 +9,10 @@ keywords: [FlutterFlow, Share Action, Navigation, Concepts]
 
 # Share [Action]
 
-Share Action can be used to send a text using the Android or iOS device's share dialog. You can send the text using email, message, or any other application present on the device that supports sharing functionality.
-
-<figure>
-    <img src="https://firebasestorage.googleapis.com/v0/b/ecommerceflow-docs/o/share-example.gif?alt=media&token=f902c889-56e0-4f40-9413-7e5852d5d8c2"></img>
-  <figcaption class="centered-caption"></figcaption>
-</figure>
-
-## Define Share Action
-
-Go to your project page on FlutterFlow and follow the steps below to define an Upload Photo/Video Action to a widget:
-
-1. Select the **widget** in which you want to set the Action.
-
-2. Select the **Actions** from the Properties Panel (the right menu).
-
-3. Click **+ Add Action** button.
-
-4. Choose a gesture from the dropdown among ***On Tap****,* ***On Double Tap****,**or* **On Long 
-   Press**.
-
-5. Select the **Action Type** as ***Share***.
-
-6. Now, you need to specify a **URL/Text Value**. It can be set either by defining a **Specific 
-   Value** or by using **From Variable** to use a value stored inside a variable. 
-   - If you are using **Specific Value**, enter the text in the **Value** field. 
-   - If you are using **From Variable**, you need to select the **Source**.
-
-Demo of defining Share Action using a **Specific Value** is as follows:
-
-<img src="https://firebasestorage.googleapis.com/v0/b/ecommerceflow-docs/o/share-with-value.gif?alt=media&token=415cf039-dae7-4ee0-ad3c-c31a8c5c4a50"></img>
-
-<p></p>
-
-Alternatively, a demo of defining Share Action using **From Variable** option is as follows:
-
-<p></p>
-
-
-<figure>
-    <img src="https://firebasestorage.googleapis.com/v0/b/ecommerceflow-docs/o/share-with-variable.gif?alt=media&token=7d77df34-7c82-47fe-ba50-8eedf699c6ea"></img>
-  <figcaption class="centered-caption"></figcaption>
-</figure>
-
+The **Share Action** enables users to send text or URLs from your app using the native sharing capabilities of their device. This functionality allows users to share information through various applications installed on their devices, such as email, messaging apps, or social media platforms.
 
 :::warning
-You won't be able to try out this Action using FlutterFlow's *Run Mode* or *Preview Mode*. To 
-test this Action, you have to run it on an iOS or Android device or emulator. You can either 
-**Download the Code** (by going to `Developer Menu > Download Code`) and build it for your 
-device, or use the **Build APK** button (present on the [**Tool Bar**](../../intro/ff-ui/toolbar.md) to generate an APK that 
-you can run on your Android device.
+It's important to note that the Share Action is designed for mobile platforms and is not supported in FlutterFlow's Run Mode or Preview Mode. To test this functionality, you need to [**run your app on an iOS or Android device or emulator**](../../testing-deployment-publishing/running-your-app/local-run.md).
 :::
+
+![share-action](imgs/share-action.avif)

docs/ff-concepts/navigation-routing/share-action.md

@@ -168,9 +168,9 @@ com/embed/1abddd1120db477da2c085dbc6b7a742?sid=5b161c8b-3957-4ac9-b27f-dc5ebc03f
 
 
 
-## Enable Billing for Cloud Functions Access
+## Enable Billing
 
-If you want to deploy functions (e.g., Braintree payments, Push Notifications), you will need to enable billing for your Firebase project. Please follow these steps to enable billing:
+If you want to deploy [Cloud Functions](https://firebase.google.com/products/functions) (e.g., Braintree payments, Push Notifications) or use [Firebase Cloud Storage](https://firebase.google.com/products/storage), you will need to enable billing for your Firebase project. Please follow these steps to enable billing:
 
 1. From the Firebase dashboard of your project, navigate to the far left menu. Under Build, select **Functions** and then select **Upgrade project**.
 

docs/ff-integrations/firebase/connect-to-firebase-setup.md

@@ -0,0 +1,39 @@
+---
+title: Components
+slug: /generated-code/component-model
+sidebar_position: 6
+---
+
+# Generated Code: Components
+
+Similar to a [**Page**](pages-generated-code.md), when creating a **[component](../resources/ui/components/intro-components.md)** in FlutterFlow, it automatically generates two files: a `Widget` class and a `Model` class. 
+
+:::info[Prerequisites]
+This guide uses examples from the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v1)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
+:::
+
+## ComponentModel class
+
+`ComponentModel` classes are responsible for managing the state and behavior of individual components used within a page. These classes extend the `FlutterFlowModel` class, providing a consistent structure and shared functionality across all component models. This ensures that each component's state is isolated and reusable, making the app easier to maintain and scale.
+
+The lifecycle of a `ComponentModel` and its associated widget class follows the same structure as a page. For more details, refer to the documentation on **[Generated Pages](pages-generated-code.md)**.
+
+### onComponentLoad Action: Generated Code
+
+When you define actions for the `onComponentLoad` action trigger of a component, these actions are added inside an `addPostFrameCallback` method within the page's `initState` method. This ensures that the actions are executed only after the initial widget tree is built.
+
+```js
+ @override
+  void initState() {
+    super.initState();
+    _model = createModel(context, () => ProductListPageModel());
+
+    // On component load action.
+    SchedulerBinding.instance.addPostFrameCallback((_) async {
+        await _model.updateTotalCost(context);
+        safeSetState(() {});
+    });
+    
+  }
+```
+

docs/generated-code/component-gen-code.md

@@ -0,0 +1,109 @@
+---
+title: FlutterFlow Model
+slug: /generated-code/flutterflow-model
+sidebar_position: 4
+---
+
+# FlutterFlow Model
+
+The `FlutterFlowModel` class is an abstract class used in FlutterFlow to provide a unified and extensible structure for managing state and behavior of widgets (both pages and components). It encapsulates **initialization, state management,** and **disposal** logic, making it easier to handle the lifecycle of widgets and their models. 
+
+FlutterFlow automatically generates the `flutter_flow_model.dart` file, which contains the `FlutterFlowModel` class and utility methods like `wrapWithModel()` and `createModel()`.
+
+The diagram below illustrates how these utility classes and methods are utilized in a widget or model class:
+
+
+![page-generated.png](imgs/page-generated.png)
+
+When a component is added to your page (and every component you create [generates both a widget and a model class)](component-gen-code.md), the flow below explains how the utility classes are used when there is a child component:
+
+![page-component-generated.png](imgs/page-component-generated.png)
+
+<p></p>
+
+Here’s a breakdown of the lifecycle of `FlutterFlowModel` class:
+
+## Initialization
+Ensures the model is initialized **only once** and is tied to the `BuildContext` and the widget it is associated with.
+
+```js
+abstract class FlutterFlowModel<W extends Widget> {
+  // Initialization methods
+  bool _isInitialized = false;
+  void initState(BuildContext context);
+  void _init(BuildContext context) {
+    if (!_isInitialized) {
+      initState(context);
+      _isInitialized = true;
+    }
+    if (context.widget is W) _widget = context.widget as W;
+    _context = context;
+  }
+```
+
+
+## Widget & Context references 
+
+Provides references to the associated widget and its `BuildContext`.
+
+```js
+  // The widget associated with this model. This is useful for accessing the
+  // parameters of the widget, for example.
+  W? _widget;
+  W? get widget => _widget;
+
+  // The context associated with this model.
+  BuildContext? _context;
+  BuildContext? get context => _context;
+```
+
+`_widget` and `_context` (private fields) store the widget and context references. `widget` and `context` (getters) are the public accessors for `_widget` and `_context`.
+
+## Disposal
+
+Manages the cleanup of resources when the model or widget is disposed.
+
+```js
+ bool disposeOnWidgetDisposal = true;
+  void dispose();
+  void maybeDispose() {
+    if (disposeOnWidgetDisposal) {
+      dispose();
+    }
+    // Remove reference to widget for garbage collection purposes.
+    _widget = null;
+  }
+```
+The `disposeOnWidgetDisposal` determines whether the model should be disposed when the widget is removed. This defaults to `true` for **pages** and `false` for **components** (as parent models typically manage their child components).
+
+The `maybeDispose()` checks `disposeOnWidgetDisposal` before disposing. It removes the widget reference to aid garbage collection.
+
+## Updates and Change Notification
+
+Allows the model to notify the associated widget or parent component/page when updates occur.
+
+```js
+ // Whether to update the containing page / component on updates.
+  bool updateOnChange = false;
+  // Function to call when the model receives an update.
+  VoidCallback _updateCallback = () {};
+  void onUpdate() => updateOnChange ? _updateCallback() : () {};
+  
+  FlutterFlowModel setOnUpdate({
+    bool updateOnChange = false,
+    required VoidCallback onUpdate,
+  }) =>
+      this
+        .._updateCallback = onUpdate
+        ..updateOnChange = updateOnChange;
+  
+  // Update the containing page when this model received an update.
+  void updatePage(VoidCallback callback) {
+    callback();
+    _updateCallback();
+  }
+```
+
+## wrapWithModel() 
+
+The `wrapWithModel()` method in FlutterFlow links a model to a widget and its child widgets, allowing them to access and manage state. It wraps the widget with a Provider, making the model available throughout the widget tree.