Merge branch 'main' into fix/test-auth-on-local-run

Author: pinkeshmars

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

@@ -380,7 +380,7 @@ export const PricingToggles = () => {
           </tr>
           <tr>
             <td>Cloud Functions<br/><span className="feature-description">Write and deploy Firebase Cloud Functions directly from FlutterFlow</span></td>
-            <td>❌</td>
+            <td>✅</td>
             <td>✅</td>
             <td>✅</td>
             <td>✅</td>

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

@@ -68,7 +68,9 @@ necessary code.
 This can significantly speed up the building process and reduce the need for in-depth programming
 knowledge, making it especially useful for custom functions and actions.
 
-**Limitation:** The prompts are limited to 100 characters currently.
+:::info[Limitation]
+Your prompt must be at least 3 words and no more than 500 characters.
+:::
 
 <div style={{
     position: 'relative',

docs/intro/ff-ui/imgs/toolbar.avif

@@ -13,11 +13,11 @@ The Toolbar, located at the top of the app builder, provides easy access to nume
 
 ![toolbar](imgs/toolbar.avif)
 
-## Project info
+## Project Info
 
 Hovering over this section reveals the essential information about your project. Here, you can easily check the project name, branch name, environment name and the current version of FlutterFlow that you're using, along with its release date. Additionally, it shows the Flutter version that your project is currently running on.
 
-## Help
+## Help Menu
 
 From here, you will get access to essential resource links that will come in handy while building your apps.
 
@@ -31,7 +31,7 @@ From here, you will get access to essential resource links that will come in han
 8. **Current Status/Known Issues**: We want to keep you informed about the current status of FlutterFlow and provide updates regarding any known issues. We aim to ensure transparency and keep you in the loop about the platform's performance and potential issues.
 9. **Show/Hide Chat**: You can use this option to show or hide the chat button at the bottom right of the app builder.
 
-## Keyboard shortcuts
+## Keyboard Shortcuts
 
 With keyboard shortcuts, you can perform common actions related to widgets and run your project in Test or Run mode with just a few keystrokes, saving you time and effort. Select this option to see all the shortcuts.
 
@@ -43,168 +43,12 @@ The Command Palette makes it easy to find and use things in the App Builder. Ope
 
 ![command-palette.avif](imgs/command-palette.avif)
 
-## AI Tools
-FlutterFlow AI Tools is a powerful set of features designed to speed up app development by leveraging artificial intelligence. These tools allow you to quickly generate app elements such as pages, components, and even entire page layouts with relevant widgets automatically populated.
-
-### New Page Creation
-Instantly create pages in your app from a prompt. To create a page, open the **AI Tools** menu from the Toolbar. Next, select **New Page Creation** and enter a description for your page.
-
-    <div style={{
-        position: 'relative',
-        paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
-        height: 0,
-        width: '100%'}}>
-        <iframe 
-            src="https://demo.arcade.software/jAH6Ar0X8fTIk3PTRNej?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>
-
-### New Component Creation
-Aside from pages, you can also create [Components](/resources/ui/components) directly from a prompt. To create a component, open the **AI Tools** menu from the Toolbar. Next, select **New Component Creation** and enter a description for your UI component.
-
-    <div style={{
-        position: 'relative',
-        paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
-        height: 0,
-        width: '100%'}}>
-        <iframe 
-            src="https://demo.arcade.software/qTqZVHv7EOjw0Gcfp697?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>
-
-### Sketch To Component
-Sketch to Component allows you to add a sketch of your [Component](/resources/ui/components). This sketch can include outlines of widgets or layouts to incorporate, and it can also include annotations that tell the AI tool more about the design you have in mind. 
-
-To create a Component from a sketch, open the **AI Tools** menu from the Toolbar. Next, select **Sketch to Component** and draw directly in the input or upload an image file of your sketch.
-
-    <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/llUMoLjlVutwhBfi5rxH?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>
-
-### Page Autocomplete
-Page Autocomplete intelligently adds relevant widgets to a page based on the pages’s context, making it easy to complete partially built pages.
-The project context includes the existing widgets and design of those widgets, as well as the page's description. 
-
-If the page does not have a description, you will be asked to describe what you want the page to contain. 
-
-To use Page Autocomplete, open the **AI Tools** menu from the Toolbar. Next, and select **Page Autocomplete** on the page that
-you want FlutterFlow AI to complete.
-
-    <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/nI1ECv9gcuY4iurJaWJC?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>
-
-## Canvas size
-
-We allow you to visualize and design your app for various mobile, tablet, and desktop devices. The [canvas](../ff-ui/canvas.md) size is defined as width (in pixels) x height (in pixels). This size is determined according to the device selected. To set a custom canvas size, click on the Canvas Size and enter the width and height (in pixels) you want.
-
-<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/6TBNjYNfVDmV4NawxA4f?embed&show_copy_link=true"
-        title="Sharing a Project with a User"
-        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>
-
-## Project history
-
-Understand the crucial concepts of project history, such as saving and versioning [here](../../testing-deployment-publishing/branching-collaboration/saving-versioning.md).
-
-## Project comments
+## AI Generation History
+
+The **AI Generation History** panel lets you track the status of your AI-generated items. It provides a list of all previously generated pages and components, and you can easily preview them from here.
+
+
+## Project Comments
 
 This helps you leave your thoughts, opinions, questions, or feedback on a specific widget with your project team or a client. While adding a comment, you can tag users, and they will be able to respond, creating a thread of conversation.
 
@@ -214,7 +58,7 @@ To tag users, select the @ symbol and choose the project team member(s).
 
 :::
 
-## Optimizations & Enhancements
+## Project Suggestions
 
 We scan and suggest enhancements to elevate your app's design and speed. Imagine having a personal consultant for design and performance dedicated to improving the user experience of your app.
 
@@ -230,7 +74,7 @@ You can control what kind of suggestions you would like to receive by clicking o
 
 ![Optimization.avif](imgs/Optimization.avif)
 
-## Project issues
+## Project Issues
 
 If there are any issues or warnings present in your current project that might result in a build failure or app crash, they will be displayed in this section. You can click this option to view a short description of each issue and navigate to the place where you can fix the issue by clicking on the respective issue.
 
@@ -242,11 +86,12 @@ If there are any issues or warnings present in your current project that might r
 
 ![Warning-and-errors.avif](imgs/Warning-and-errors.avif)
 
-## Branching
 
-[Branching](../../testing-deployment-publishing/branching-collaboration/branching.md) enables you to create a separate copy of your existing project, allowing you to develop new features without affecting the current functionality.
+## Version Control
+**Version Control** is a system that tracks changes to your project's files over time, allowing you to revert to previous states if needed. In FlutterFlow, you can utilize [Branching](../../testing-deployment-publishing/branching-collaboration/branching.md) to create a separate copy of your project to build or test features without affecting the main version.
 
-## Developer menu
+
+## Developer Menu
 The Developer Menu provides developers with access to tools such as code viewing, GitHub integration, and source code download capabilities.
 
 1. **View Code**: This option lets you display the *Dart* code for all the pages of your FlutterFlow project. You can also take a look at the dependencies being used by the app here.
@@ -267,9 +112,7 @@ _Connect GitHub Repo_, _Download Code_, and _Download APK_ features requires a [
 
 7. **Refactor Project**: This option opens your FlutterFlow project in a YAML-based file editor, allowing you to perform bulk edits more efficiently. You can search, edit, and replace values across multiple files—useful for renaming keys, updating data types, or migrating resources to a Library. Check out the [**Refactor Project**](../../resources/projects/refactor-project.md) documentation for more details.
 
-
-
-## Share project
+## Share Project
 
 You can make a project public so that others can view and clone your project. Before you share your project, make sure to remove any sensitive information.
 
@@ -280,10 +123,10 @@ You can make a project public so that others can view and clone your project. Be
 
 :::
 
-## Preview
+## Preview App
 
 You can use this option to run your app in [Preview mode](../../testing-deployment-publishing/running-your-app/run-your-app.md#preview-mode).
 
-## Testing
+## Test Mode
 
 This menu allows you to run your app in [Test](../../testing-deployment-publishing/running-your-app/run-your-app.md#test-mode) or [Run](../../testing-deployment-publishing/running-your-app/run-your-app.md#run-mode) mode.

docs/intro/ff-ui/toolbar.md

@@ -46,7 +46,7 @@ Lastly, you can connect with a [FlutterFlow Expert](https://experts.flutterflow.
 
 We regularly release feature updates and bug releases. To make sure you are on the most recent version of FlutterFlow select Ctrl/Cmd + R.
 
-If you think you've found a bug, please submit an [in-app bug report](../intro/ff-ui/toolbar.md#help) or let us know via chat (Standard and Pro users only). Please make sure to include:
+If you think you've found a bug, please submit an [in-app bug report](../intro/ff-ui/toolbar.md#help-menu) or let us know via chat (Standard and Pro users only). Please make sure to include:
 
 * A link to your project
 * The page(s) effected

docs/misc/customer-support-policy.md

@@ -100,6 +100,10 @@ To add inline function, open the Set from Variable dialog wherever it's possible
 
 For example, we may want to quickly calculate the discount amount of a product where the discount is 18% of the MRP of the product. The expression would be `cost - (cost * discount)`.
 
+:::tip
+Looking for more power and flexibility? Use the new [**Custom Code Expression**](#custom-code-expression). It’s a more advanced version of Inline Functions that lets you access FlutterFlow generated resources without passing them as arguments. You also get real-time autocomplete and inline error checking for faster, more accurate logic.
+:::
+
 **Precedence of operations**
 
 Inline Function for math operations follow typical precedence (e.g., multiplication/division before addition/subtraction), but parentheses can change the order.
@@ -162,6 +166,79 @@ Here are some common expressions you can use for your business logic:
 | `int.parse(s)`                     | Convert the **String** into an **integer.**             | `int.parse(stringValue)`   | `int`            |
 
 
+## Custom Code Expression
+
+**Custom Code Expression** lets you write short Dart code directly in widget property fields and action flows in FlutterFlow. It’s a more powerful version of [**Inline Function**](#inline-function-code-expressions), allowing you to directly access FlutterFlow generated classes, global variables, widget properties, parameters, and more without needing to manually pass them as inputs.
+
+Custom Code Expressions also support real-time autocomplete, making it easy to discover available fields as you type. For example, when you type `FFAppState().`, it will suggest all available app state variables along with their types.
+
+In addition, inline validation provides immediate feedback as you write, helping you catch syntax errors or invalid property references.
+
+:::info
+To use Custom Code Expression, you must have an active [**FlutterFlow paid plan**](https://www.flutterflow.io/pricing).
+:::
+
+:::tip
+- To explore what you can access within a Custom code expression, refer to the [**Common Examples**](../../../ff-concepts/adding-customization/common-examples.md) page.
+- Press `^ + Space` (or `Ctrl + Space`) while typing to see suggestions for what you can access in your Custom code expression.
+- You can access values inside custom structs. For example, you can use `FFAppState().localDeviceInfo.osVersion` if that field exists in your app state.
+- To use Custom code expressions better, it's helpful to understand how FlutterFlow builds your project behind the scenes. You can check the [**State Management**](../../../generated-code/state-mgmt-gen-code.md) page and other **Generated Code** sections to learn how everything is set up.
+
+:::
+
+Here are a couple of examples showing how to access App State and Page State within a Custom code expression:
+
+- **App State Access:** For example, to check if dark mode is enabled using an App State variable:
+
+    ```jsx
+    FFAppState().enableDarkMode ? 'Dark Mode On' : 'Light Mode Off'
+    ```
+
+    This accesses the global `enableDarkMode` boolean stored in `FFAppState`, and returns a string based on its value.
+
+- **Page and Component State Access:** For example, to access a page or component state variable like `searchText`, you start with `_model.` and then select the variable from the autocomplete suggestions.
+
+    ```jsx
+    _model.searchText.isEmpty ? '' : 'Searching for "${_model.searchText}"'
+    ```
+
+    This expression checks if the `searchText` variable (defined as a page state) is empty, and returns an appropriate message. The `_model` object refers to the current page’s generated state model.
+
+Here's an example of adding a Custom Code Expression:
+
+<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/6RV03v2ByVqRgCTeg3QF?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>
+
+### Execute Custom Code [Action]
+
+To use a Custom Code Expression when triggering actions in FlutterFlow (i.e., inside an Action Flow), you can use the **Execute Custom Code** action. This allows you to run a Dart expression when something happens, such as tapping a button or after a page loads.
+
+![execute-custom-code.avif](img/execute-custom-code.avif)
+
+The Execute Custom Code action can be really helpful in scenarios where the home page is removed early from the navigation stack and standard navigation using the local context may fail. To prevent this, you can [use the global navigator context](../../../ff-concepts/navigation-routing/deep-dynamic-linking.md#using-global-context-to-navigate) inside a code expression.
 
 ## Custom Functions
 
@@ -170,3 +247,18 @@ You can also use custom functions to handle slightly more complex calculations o
 :::info
 Learn more about [**Custom Functions**](../../../ff-concepts/adding-customization/custom-functions.md).
 :::
+
+## FAQS
+<details>
+<summary>
+How is a Custom Code Expression different from an Inline Function?
+</summary>
+<p>
+Custom Code Expression is a more advanced and flexible version of Inline Function.
+
+With Inline Functions, you had to manually pass values as arguments. In contrast, Custom Code Expressions let you directly reference FlutterFlow generated resources (such as `FFAppState()`, `_model`, context, and more) without needing to pass them in.
+
+You can write any valid Dart expression in a Custom code expression, even multi-line logic using anonymous functions. Plus, Custom Code Expressions support real-time autocomplete and inline error validation, making it much easier to discover available variables and avoid mistakes.
+
+</p>
+</details>