Merge branch 'main' into update-misc

Author: michael-mcroskey

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

@@ -18,10 +18,12 @@ There are a few different ways to make custom code accessible in FlutterFlow:
 
 * **[Custom Functions](custom-functions.md):** Custom Dart functions that can be used to set Widget or Action properties. 
 * **[Custom Actions](custom-actions.md):** Custom Dart functions that can be triggered by [Action Triggers](https://docs.flutterflow.io/resources/functions/action-triggers/) or used as nodes in an [Action Flow](https://docs.flutterflow.io/resources/functions/action-flow-editor#action-flow-editor). These are usually `async` functions and are able to import [custom package dependencies](#adding-a-pubspec-dependency).
+* **[Code File](code-file.md):** You can define custom classes, enums, and logic to manage your app’s data and behavior.
 * **[Custom Widgets](custom-widgets.md):** Custom Flutter widgets that can also import [custom package dependencies](#adding-a-pubspec-dependency) and be used in the same way as [Components](https://docs.flutterflow.io/resources/ui/components) throughout your project. 
 * **[Configuration Files](configuration-files.md):** You'll have the ability to edit native files for Android and iOS.
 
 
+
 :::tip[Why Write Custom Code?]
 
 - **Extend Functionality:** Add features that are not included in the standard FlutterFlow

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

@@ -208,7 +208,7 @@ If you notice carefully, the items appear in a staggered fashion. This can be ac
 
 Select the item in the list and add the Slide animation.
 
-In the Delay property, open the variable menu and add a [code expression](../../resources/control-flow/functions/utility-functions.md#code-expressions) to calculate the delay value based on the item's index. For this example, we use the formula `[index] * 100`, where `index` represents the position of the item, and `100` is the delay in milliseconds. This means the first item will slide in after 100 ms, the second after 200 ms, and so on, creating a staggered animation effect.
+In the Delay property, open the variable menu and add a [inline function](../../resources/control-flow/functions/utility-functions.md#inline-function-code-expressions) to calculate the delay value based on the item's index. For this example, we use the formula `[index] * 100`, where `index` represents the position of the item, and `100` is the delay in milliseconds. This means the first item will slide in after 100 ms, the second after 200 ms, and so on, creating a staggered animation effect.
 
 <div style={{
     position: 'relative',

docs/ff-concepts/adding-customization/imgs/access-fields-methods.avif

@@ -88,33 +88,27 @@ To add a design system from a library, start by creating the design system in a
 
 ## Import Figma Theme
 
-You might use Figma to design your app and build it accordingly in our builder. If you have a lot of colors and text styles, importing them manually can take some time. You can now import the whole Figma theme, which includes the colors and text styles, directly into our builder.
+:::tip[PLANS]
+Import Figma Theme feature is available on the **Teams** plan and higher. Check our [**pricing plans**](https://flutterflow.io/pricing).
+:::
 
-:::info
+You can bring your Figma design system directly into your FlutterFlow project. This streamlines the design-to-development process by automatically importing colors and typography from your Figma file, helping you maintain visual consistency and reduce manual effort.
 
-Before you import the Figma theme, ensure you have access to the Figma design file and [**generate the access token**](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).
+To import a Figma theme into your FlutterFlow project, go to **Theme Settings > Design System** and click **Connect To Figma**. Authenticate your account and grant access to Figma. Once connected, paste your Figma file URL to fetch the theme.
 
-:::
+You’ll see a list of all imported colors; start mapping them to your project colors. You can filter these colors by whether they’re mapped or unmapped, and you also have the option to bulk delete any imported colors. After that, you can customize your project typography using the imported text styles.
 
-To import the Figma theme:
-
-1. Open the **Theme Settings > Design System**.
-2. Click the **Import Figma Theme** button. This will open a new popup.
-3. Enter your **Figma File URL** and **Personal Access Token**. The *Personal access tokens* allow us to access all of your files and data in Figma.
-4. Click **Import Figma Theme**.
-    1. Now, you'll see a list of colors from your Figma file, and here you can decide which one to keep. If everything looks good to you, Click **Import & Continue**.
-    2. You can replace the current theme colors with new/imported ones. Click on any color, and the dropdown will display all imported colors. Click on the new color to replace it. When done, click **Save & Continue**.
-    3. If you have custom text styling in your Figma file, it will be displayed here, and you can choose which one to import. Click **Import & Continue**.
-    4. Replace any existing style with the new one and click **Save & Finish**.
-5. Finally, click **Finish & Close**.
+:::info
+All imported colors are accessible anytime under **Colors > Custom Colors**.
+:::
 
 <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/gEry2KO5BeoZkflYHm8f?embed&show_copy_link=true"
+        src="https://demo.arcade.software/84lqVC1ZDkq7EFFnCusm?embed&show_copy_link=true"
         title="Sharing a Project with a User"
         style={{
             position: 'absolute',
@@ -571,31 +565,13 @@ You can customize the following properties of each text style:
 - **Color** - Set the color of the text using either the color picker or by specifying a Hex value.
 - **Font Family** - You can change the Font Family for any style from here. Click here to set the font family from [*Google Fonts*](https://fonts.google.com/) or choose from the uploaded Custom Fonts. You can also choose whether this style is a *Primary* or *Secondary Font Family*.
 
-<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/JOD7EaZpTUgqzuvLT876?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 can also create fully custom text styles to match your design needs, going beyond the default styles like Display, Headline, or Title. Simply click the **+ Add Custom Text Style** button, a new text style will be added at the bottom, then edit the style name and customize the style properties.
+
+![typography](imgs/typography.avif)
+
+:::tip[PLANS]
+Custom Text Styles are available on the **Teams** plan and higher. Check our [**pricing plans**](https://flutterflow.io/pricing).
+:::
 
 #### Adding responsive text styles
 

docs/ff-concepts/adding-customization/imgs/custom-class-as-data-type.avif

@@ -10,7 +10,7 @@ keywords: [FlutterFlow, Deep Linking, Dynamic Linking, Concepts]
 # Deep & Dynamic Linking
 
 :::danger[Support for Dynamic Links]
-On August 25th, 2025, Firebase Dynamic Links will be shut down. Read more about the [**announcement here**](https://firebase.google.com/support/dynamic-links-faq). It's recommended to start exploring alternative solutions like [**Branch.io**](#deep-links-with-branchio) for link management and deep linking.
+On August 25th, 2025, Firebase Dynamic Links will be shut down. Read more about the [**announcement here**](https://firebase.google.com/support/dynamic-links-faq). It's recommended to start exploring alternative solutions like [**Branch.io**](#branch-deeplinking-library) for link management and deep linking.
 :::
 
 Adding deep and dynamic linking allows you to share a special type of link that takes the user right
@@ -752,10 +752,36 @@ Here’s a quick demo to show how to configure those values inside your library
 
 <p></p>
 
-**Initialize the Branch SDK**
+#### Initialize the Branch SDK
 
 Open your `main.dart` file in FlutterFlow and add the `initBranch` custom action under the **Final Actions** section. This ensures the **Branch SDK** is initialized when your app launches.
 
+<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/sAGP2IBXMbHMPP4rXRaQ?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>
+
 
 ### Handle Branch Deeplink [Custom Action]
 
@@ -805,7 +831,7 @@ The `handleBranchDeeplink` action receives a `linkData` object that contains all
 
 - **`page`:** The target page or screen the link is meant to open (e.g., paywall). This is a custom parameter set by the user when generating the link.
 
-- Any custom parameters added during link creation (e.g., `campaign`, `productId`, `referrer`, etc.)
+- Any custom parameters added during link creation (e.g., `campaign`, `productId`, `referrer`, etc.). Ensure the key and value is both `String` and `String`.
 
 This lets you write flexible, conditional navigation logic based on what was shared.
 
@@ -838,7 +864,10 @@ This lets you write flexible, conditional navigation logic based on what was sha
 
 <p></p>
 
-
+:::tip
+Keep **"Allow Navigate Back"** checked when navigating from the Home Page to ensure it stays in the stack. This is applicable to any navigation from the Home Page, not limited to deeplinking navigation logic. 
+This allows the user to return to the Home Page at any time and ensures that deep link logic defined there continues to work.
+:::
 
 
 Use the link data from this callback to:
@@ -847,11 +876,11 @@ Use the link data from this callback to:
 - Load content from Firestore using a referenced ID.
 
 
-:::danger[Testing Deeplinks]
-It’s recommended to test deep links on a **physical device**, as link verification (especially for Universal Links or App Links) may not consistently work on emulators or simulators.
-:::
 
 
+:::danger[Testing Deeplinks]
+It’s recommended to test deep links on a **physical device**, as link verification (especially for Universal Links or App Links) may not consistently work on emulators or simulators. We recommend using **[Local Run](../../testing-deployment-publishing/running-your-app/local-run.md)** to run your apps on physical devices.
+:::
 
 
 ### Generate Link [Custom Action]
@@ -873,11 +902,17 @@ The action accepts the following parameters:
 - **`description`** – (Optional) A short description of the content.
 
 - **`metadata`** – A dynamic map of custom parameters to include with the link
-(e.g., page: "imageDetails", imageRef: "abc123", etc.)
+(e.g., page: "imageDetails", imageRef: "abc123", etc.) 
 
 - **`linkProperties`** – A dynamic map for configuring how the link behaves
 (e.g., set the `feature`, `channel`, `campaign`, or `stage` for analytics).
 
+:::warning[JSON maps]
+Due to a limitation, if you plan to leave map-type variables (like `metadata` or `linkProperties`) empty, you must still pass them as **empty maps**, not `null`.  
+Ensure all keys and values are **plain strings**, avoid nested JSON or non-string types.  
+Incorrect structure may cause the Link Generation action to fail silently.
+:::
+
 ### Branch Helper Functions
 
 These functions help you safely work with deep link data, extract values, and conditionally navigate based on link metadata.
@@ -965,3 +1000,45 @@ Now in your `handleBranchDeeplink` action callback, add the additional logic to
 </div>
 
 
+### FAQs
+
+<details>
+<summary>Why isn't my deep link working when I navigate to another page from the home page?</summary>
+
+It's likely because you're navigating in a way that removes the Home Page from the stack for example, disabling "**Allow Navigate Back**" in the Navigate Actions.
+
+Since the deep link handler is defined on the Home Page, it gets disposed and can’t respond when a deep link is triggered.
+
+✅ Solution:
+
+Keep the Home Page in the stack by enabling "**Allow Navigate Back**" on any navigation actions from your home page (not limited to navigation logic in onLinkOpened action callback).
+
+This ensures the Home Page stays active and can continue handling deep links.
+
+</details>
+
+<details>
+<summary> Why is my Branch link generation failing?</summary>
+
+This often happens because one or more of the inputs passed to the action (like `metadata` or `linkProperties` or `customParams` when using `createLinkProperties` helper function) contains invalid JSON formatting.
+
+Branch expects these values to be passed as a map of plain `String` key-value pairs, not as nested JSON, objects, or dynamic types.
+
+Ensure both **Key and Value's expected type** is `String` and `String` and try again.
+</details>
+
+<details>
+<summary> Why isn’t deep linking working when testing from a simulator? </summary>
+
+Deep linking, especially Universal Links and deferred deep linking may not work reliably on iOS or Android simulators/emulators due to platform limitations.
+
+Simulator Limitations:
+- **iOS:** Simulators cannot verify Universal Links properly (no App Store, limited AASA domain support).
+
+- **Android:** Some versions fail to auto-verify App Links or handle deferred deep links without Play Services.
+
+✅ Recommended:
+
+Always test deep linking on a physical device for accurate behavior.
+
+</details>